摘要：前言在自适应布局或者移动端网页开发时，我们经常会用到和两个长度单位。，相对长度单位。相对于当前对象内文本的字体尺寸。所有未经调整的浏览器中都是。最大的优点是提供一致尺寸，便于计算。为了还原设计稿和实现合理的布局所以需要根元素重写。
前言
在自适应布局或者移动端网页开发时，我们经常会用到em和rem两个长度单位。接下来我们讨论一下这两个单位和px之间的区别，以及他们的使用场景等。
区别 pxpx，像素(计算机屏幕上的一个点)。（引自w3school-css单位）
像素（Pixels），相对长度单位，它是相对于显示器屏幕分辨率而言的，它兼容性好而且精确，但是这种方法当用户在缩放浏览器或者需要兼容不同移动设备时，我们的页面布局可能会被打破。
emem为了解决上述问题而进化产生，也是相对长度单位，根据使用它的元素的大小决定（有人误以为是根据父元素，那是因为使用它的元素继承了父类的属性，根据W3C标准可知 ，它们是基于当前对象元素的字体大小），它可以自动适应用户所使用的字体。
em，相对长度单位。相对于当前对象内文本的字体尺寸。关于em值的计算
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。（引自em-CSS3参考手册）
假设任意浏览器的默认字体大小都是16px。所有未经调整的浏览器中都是1em=16px。为了方便换算，我们通常在css中设置body的属性 font-size:62.5%，这就使1em值变为10px,这样我们就可以把设计稿的px值除以10，然后换上em作为单位来进行px和em的换算，十分简单，例如16px可以改写为1.6em。
rem由于em值不是固定的，1em在不同元素下的值会因为该元素或者该元素父元素的大小不同而不同，因此在我们多次使用时，就会带来开发的难度。这时候rem(root em)应运而生了。rem是相对于根(html)元素，这就意味着，我们只需要根据自己的需要给根元素确定一个参考值，然后通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。最大的优点是提供一致尺寸，便于计算。
rem，相对长度单位。相对于根元素(即html元素)font-size计算值的倍数。（引自rem-CSS3参考手册）根元素重写
em 和 rem 单位之间的区别是浏览器根据谁来转化成px值,em是基于当前对象内文本的字体尺寸决定，rem是基于html元素的字体大小来决定，而根(html)元素的字体大小如果没有显式地设置固定值去覆盖，那么它首先来自浏览器设置，因此浏览器的字体大小设置可以影响每个使用rem单元以及每个通过em单位继承的值。为了还原设计稿和实现合理的布局所以需要根元素重写。浏览器缩放动态修改根元素大小可以参考以下代码段。
同时，也有人认为这种做法在一定程度上剥夺了用户对浏览器字体设置的权利，他们的观点是rem的好处是给了我们的一个途经去获取用户的偏好来影响网站中每一处使用rem的元素大小，无论用户如何设置自己的浏览器，我们的布局都能调整到合适大小。这个就暂不做讨论吧，日后有机会再讲。
使用场景如果这个属性根据它的font-size进行测量，则使用em，其他的使用rem
媒体查询中使用 rem 单位
不要在多列布局中使用 em 或 rem -改用 %
关于em和rem在完成模块化组件中的应用实例，你可以参考这篇文章。
兼容所有浏览器都支持px，除了IE8及以下版本，其它的浏览器都支持em和rem属性。对于不支持它的浏览器，就多写一个绝对单位的声明。
IE9/IE10在用于伪元素时或者使用字体简写声明时不支持rem
IOS Safari5.0-5.1虽然支持rem，但是在使用媒体查询时不支持rem
工具在这里为大家提供一个px，em，rem单位转换工具。地址：http://pxtoem.com/
讨论区csdn移动端和pc端两套代码，两种字号大小声明，pc端用了px，没有根据浏览器缩放自适应，移动端用了rem，根据屏幕宽度重写了根元素，实现了自适应。
掘金主页用了rem，在mac的chrome中根元素固定12px，但是文字大小有根据浏览器缩放实现自适应。
你们团队是怎么做的？
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116869.html
摘要：关于与的区别，网上已经有不少文章了，在此不多谈。主要想谈的是在制作网页时，什么时候设定字体大小用，什么时候用先谈结论，再讲为什么。一般情况下，还是以用为主，只有当需要在不同设备上显示不同大小的字体时，再用。 关于rem与px的区别，网上已经有不少文章了，在此不多谈。主要想谈的是：在制作网页时，什么时候设定字体大小用px，什么时候用rem？ 先谈结论，再讲为什么。一般情况下，还是以用px...
摘要：第一种情况也不讨论了，通过断点适配后，其实你处理的还是第二种情况。至于移动端，支持情况不错，可以在生产环境使用。 css中的单位很多，%、px、em、rem，以及比较新的vw、vh等。每个单位都有特定的用途，比如当需要设置一个矩形的宽高比为16:9，并且随屏幕宽度自适应时，除了用%，其他单位是很难做到的。所以不存在说某个单位是错误的，某个单位是最好的这种说法。 那本文说的页面适配，指的...
摘要：第一种情况也不讨论了，通过断点适配后，其实你处理的还是第二种情况。至于移动端，支持情况不错，可以在生产环境使用。 css中的单位很多，%、px、em、rem，以及比较新的vw、vh等。每个单位都有特定的用途，比如当需要设置一个矩形的宽高比为16:9，并且随屏幕宽度自适应时，除了用%，其他单位是很难做到的。所以不存在说某个单位是错误的，某个单位是最好的这种说法。 那本文说的页面适配，指的...
摘要：本文主要介绍一些响应式布局容易忽略但又很重要的知识点。单位不仅仅可以用来设置字号，还可以设置任何盒模型的属性，比如有一点优势就是可以和媒体查询配合，实现响应式布局运用场景如果我们做的页面只在移动端访问，这是因为不兼容低版本的浏览器。 一、前言 响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。...
摘要：本文主要介绍一些响应式布局容易忽略但又很重要的知识点。单位不仅仅可以用来设置字号，还可以设置任何盒模型的属性，比如有一点优势就是可以和媒体查询配合，实现响应式布局运用场景如果我们做的页面只在移动端访问，这是因为不兼容低版本的浏览器。 一、前言 响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。...
阅读 1486·2021-11-22 14:45
阅读 758·2021-11-17 09:33
阅读 3765·2021-10-12 10:11
阅读 2212·2021-09-02 15:40
阅读 3203·2021-09-02 09:48
阅读 830·2019-08-30 15:54
阅读 2628·2019-08-30 15:53
阅读 2409·2019-08-30 12:54
