CSS px em rem的区别

px

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
px存在的问题,当用户修改浏览器默认字体大小时,使用px的字体不会根据浏览器字体自动适配,有造成页面不可使用的风险。

em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。默认 1em = 16px;

为了计算方便设置根元素 font-size: 62.5%; 此时 1em = 10px;

em具有继承性

#content {
    font-size: 1.2em;
    p {
        font-size: 1.2em;
    }
}
此时p段落的字体大小为1.2 * 1.2em

rem

rem是CSS3新增的一个相对单位(root em,根em),区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

px 与 rem 的选择?
对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px即可 。
对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,104评论 1 92
  • 作者:HelKyle链接:http://www.w3cplus.com/css/when-to-use-em-vs...
    红叶丶秋鸣阅读 3,469评论 0 3
  • ·##概念介绍:1.px(pixel,像素):是一个虚拟长度单位,是计算机系统的数字化长度单位,如果px要换算成物...
    小时候很帅的龙少阅读 2,198评论 0 6
  • 概念介绍 px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长...
    柯琦阅读 2,201评论 0 7
  • 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?PX特点1...
    xixihaha520阅读 575评论 0 0

友情链接更多精彩内容