说一说CSS中的尺寸单位 px em rem
2015-05-26 09:06
746 查看
下图是W3School上的css尺寸单位介绍。到目前为止我常用的是“%”和“px”，之前有一段时间喜欢用em替代所有px的单位(我大概是按照 1em = 10px 来换算的)。现在在公司实习又用回“px”了。
px为绝对大小，相对来说稳定精确兼容性好单缺少灵活性，在响应式布局中真的有鸡肋啊。（在ie6下以px问单位的页面无法缩放）。
em为相对大小，以父元素为基准设置大小。以em为单位，目标尺寸会随着窗口大小变化，这在平时的网页布局中很有用。我很享受那种网页随着浏览器窗口自由收缩变化的感觉，就像用flexbox一样。还有一点，为了适应各种屏幕的大小，我们会利用 @media 媒体查询。用em作为单位的话，在媒体查询中只要改变一下基准字体的大小就可以了。因为html作为根元素，它下面的资源都会以它为标准来自动调整自身的大小。而用px作为单位的话，则需要重新把每个元素重新计算设置。
rem我还没有用过。这是个CSS3的新增的一个相对单位，可以说是综合了相对大小和绝对大小。由于em是相对父元素来设置字体大小的，所以也会出现一些问题比如大小逐层复合。而 rem 是相对<html>根元素确立的，这样我们只需要修改根元素大小就可以控制相应字体大小了。比如，如果你想保持一个布局中的padding和margin恒定不变的话，你可以使用rem来设置它们的值。
除了IE6-IE8r，其它的浏览器都支持em和rem属性。因此为了浏览器的兼容性，可“px”和“rem”一起使用，用"px"来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果
px为绝对大小，相对来说稳定精确兼容性好单缺少灵活性，在响应式布局中真的有鸡肋啊。（在ie6下以px问单位的页面无法缩放）。
em为相对大小，以父元素为基准设置大小。以em为单位，目标尺寸会随着窗口大小变化，这在平时的网页布局中很有用。我很享受那种网页随着浏览器窗口自由收缩变化的感觉，就像用flexbox一样。还有一点，为了适应各种屏幕的大小，我们会利用 @media 媒体查询。用em作为单位的话，在媒体查询中只要改变一下基准字体的大小就可以了。因为html作为根元素，它下面的资源都会以它为标准来自动调整自身的大小。而用px作为单位的话，则需要重新把每个元素重新计算设置。
rem我还没有用过。这是个CSS3的新增的一个相对单位，可以说是综合了相对大小和绝对大小。由于em是相对父元素来设置字体大小的，所以也会出现一些问题比如大小逐层复合。而 rem 是相对<html>根元素确立的，这样我们只需要修改根元素大小就可以控制相应字体大小了。比如，如果你想保持一个布局中的padding和margin恒定不变的话，你可以使用rem来设置它们的值。
除了IE6-IE8r，其它的浏览器都支持em和rem属性。因此为了浏览器的兼容性，可“px”和“rem”一起使用，用"px"来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS尺寸单位 % px em rem 详解
- CSS尺寸单位 % px em rem 详解
- css中单位px 、em、rem的区别
- css中单位px、pt、em和rem的区别
- [转]彻底弄懂css中单位px和em,rem的区别
- 知识普及：彻底弄懂css中单位px和em,rem的区别
- 彻底弄懂css中单位px和em,rem的区别
- 彻底弄懂css中单位px和em,rem的区别 转的自己看
- 彻底弄懂css中单位px和em,rem的区别
- 彻底弄懂css中单位px和em,rem的区别
- css 单位 px em rem
- 浅谈CSS单位px、pt、em和rem
- 彻底弄懂css中单位px和em,rem的区别
- css中单位px和em,rem的区别
- css中单位px和em,rem的区别
- 彻底弄懂css中单位px和em,rem的区别
- css大小单位px em rem的转换和详解
- 彻底弄懂css中单位px和em,rem的区别
- css中单位px和em,rem的区别
- 彻底弄懂css中单位px和em,rem的区别