找回密码
 立即注册

QQ登录

只需一步,快速开始

热门经验分享: 护肤 减肥 化妆 美发 育儿 恋爱 理财 职场 旅行 运动 养生 购物 生活 运势 游戏 手机 电脑 小吃 美食 宠物 装修 西点
当前位置: 生活指南经验分享 > 游戏/数码 > 互联网 > 彻底弄懂css中单位px和em,rem的区别

彻底弄懂css中单位px和em,rem的区别

时间:2022-2-25 10:22 点击:1835次
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
  国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?

1.jpg

  PX特点

  1. IE无法调整那些使用px作为单位的字体大小;

  2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;

  3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。

  px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

  em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

  任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

  EM特点

  1. em的值并不是固定的;

  2. em会继承父级元素的字体大小。

  所以我们在写CSS的时候,需要注意两点:

  1. body选择器中声明Font-size=62.5%;

  2. 将你的原来的px数值除以10,然后换上em作为单位;

  3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

  也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。

  rem特点

  rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是

  一个例子:

  p {font-size:14px; font-size:.875rem;}

  注意:

  选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。

http://www.jingyanzhinan.cn/article-1018-1.html以上内容就是关于【彻底弄懂css中单位px和em,rem的区别 】的指南经验分享;您也可以通过下方的评论互动,发表您的意见和观点,让更多人通过生活指南经验分享因之受益,让生活变得更简单。


鲜花

握手

雷人

路过

鸡蛋
经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士。
免责申明:本站内容或图片均来自网络或网友分享,因此而产生的任何法律问题,
本站不予承担,如果内容涉及侵权,可联系页面底部邮箱,我们会及时删除处理。
------分隔线----------------------------

最新评论

相关经验
测试瓶颈期的小随笔 NDS《你的勇者》流程要点攻略 《口袋妖怪XY》冷门向精灵的战术分析 《战国无双4》关羽密武吕布打法 《战国无双4》全家宝怎么刷 《极品飞车13:变速》破完心得 《大航海时代3》所有港口及城市 经典游戏《异度空间》完美攻略 关于SEO的建议 网站改版及301设置说明 百度spider介绍 阻止个人信息在搜索引擎中出现 site语法查询说明 百度搜索引擎基础知识 禁止搜索引擎收录的方法 建站指南:百度认为什么样的网站更有抓取和收录价值 未建好页面应返回503状态码,防止被删除 百度Site App服务 《攻城掠地》武将选择详解-《攻城掠地》武将选择顺序 攻城掠地剧本玉玺争夺战攻略 攻城掠地三英战吕布地狱篇5星通关攻略 攻城掠地三英战吕布攻略 攻城掠地单骑救主地狱五星攻略 仙侠道R44破甲流推荐配置介绍 仙侠道器灵升级所需碎片数据 TP-Link 无线路由器设置图文教程 怎么设置TP-Link无线路由器图解 ... 手机号码被泄露该如何处理? 飞机和地铁为什么不欢迎充电宝? 如何戒掉手机瘾 苹果值得其他企业借鉴的四点经验 常用搜索引擎高级命令——SEO常用搜索引擎命令 网站排名优化的原理是什么 关键词分类和部署 网站排名优化的原理是什么 ThinkPHP3.2.3新特性之:数据库设置 “您需要添加对方为好友+才能给对方发送会话消息”QQ解决办法 ... 一个域名下安装两套科讯CMS的解决方法 Discuz! 修改在没有登录的情况下看到关键词和描述 电脑总死机怎么办 电脑死机原因 佳能70D和佳能6D都有什么区别 佳能相机选择 更新升级提示:请先升级 UCenter 到 1.6.0 以上版本的解决方法 DiscuzX使用其它模板点击diy没有反应问题解决 JS实现多选框效果_多选框 科讯CMS V9.0标签大全 简易的漂浮图片代码_漂浮图片代码_悬浮代码_带关闭的 JS实现内容超出多少后隐藏、显示 非常简单实用的Jquery(js)给当前页或者跳转后页面的导航栏添加选中后样式 ... 百度和谷歌的高级搜索语法示例详解 css position:absolute 如何居中对齐? :first-child 伪类向元素的第一个子元素添加样式。 phpcms v9默认后台管理员登录地址修改方法 CSS背景100%平铺 浏览器缩小背景显示不全解决办法 推广技巧 :我可以选择哪几类关键词 高中历史好适合学什么专业 所谓的手机“360度”摄像头 是用软件实现的 玩手机摄影最好要知道的20条通用法则! phpcmsv9 按比例等宽完美缩略图方案 PHPCMS V9删除栏目时没有权限(转载) PHPCMS 关于会员功能和phpsso通信 的一些经历 phpcms V9表单提交邮件配置及发送到邮件提醒详细内容 phpcms表单向导导出为EXCEL文件插件 PhpStorm常用的一些快捷键 phpcms v9 模板标签技巧,模板标签常用方法 phpcms多站点用二级目录作为站点域名,内容页生成的路径不对,都是默认了用第一个站点 ... 口气重,有可能是癌症在捣鬼....... 猪肉上有蓝色印记还能吃吗? 营业执照换地址需要什么流程 明仁天皇为何要退休 傲寒 (马頔演唱歌曲) 解决火狐浏览器显示的“警告:无响应脚本"问题 缺铁性贫血是药补还是食补-中医栗建华 PHPCMS页面标题中SEO标题用横线"-"隔开的修改方法 KindEditor编辑器自动过滤首行缩进和全角空格的解决方法 河北景观膜结构展示六 phpcms发布内容时阅读数随机显示 河北膜结构车棚「同创停车棚制作公司优势」 钱了APP会员,是不是真的?钱了官网及APP下载地址小编一文带你了解 ... 二次构造柱浇筑泵报价-眼镜板的作用知道多少 phpcms V9 新版本如何设置TAG标签关键词伪静态 phpcms 修改后台内容管理列表数量的方法 htaccess详解及.htaccess参数说明-NC 忽略路径大小写问题 如何使植物短期内不会缺水 PHPCMS V9搜索结果页分页伪静态方法 同样是100纸币为啥价值差别就那么大呢? 离心泵的零件清洗要求 海关行政复议轨制的 概述 保温建材市场的 突飞猛进发展前景可观 电视广告片计划制定的 4个原则 反射型防水透汽膜 氯化钙与氨作用的 机理 企业宣传片制作解说词要有生动性 防水透气膜让电子产品使用寿命更长 给运营人员工作中的一些建议 dev氧化锆氧气分析仪的介绍 微量氧气分析仪介绍 PHP按符号截取字符串的指定部分的实现方法 不锈钢紧固件行业未来发展趋势 不锈钢螺丝一般是用哪种型号的材料 notepad++换行符号替换方法分享 卡通熊怎么画 百度curl主动推送的实现 qq群等级头衔怎么设置显示和隐藏 怎样免费申请skype账号 快手集卡怎么领取别人送的 美团外卖差评怎么删除 泛悦如何助力智能零售 微信删除的聊天记录怎么恢复 Xposed框架安装步骤详解 如何购买二手苹果手机 MG动画公司该如何选择 蚂蚁金服为什么要脱离阿里巴巴? 抖音上的对话框程序怎么制作 腾达路由器忘记WiFi密码怎么办
推荐内容