@buoge
2017-12-18T23:01:56.000000Z
字数 1237
阅读 1367
前端
让我们以一个快速符号点概括我们介绍的内容:
rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。
em 单位基于使用他们的元素的字体大小。
rem 单位基于 html 元素的字体大小。
em 单位可能受任何继承的父元素字体大小影响
rem 单位可以从浏览器字体设置中继承字体大小。
使用 em 单位应根据组件的字体大小而不是根元素的字体大小。
在不需要使用em单位,并且需要根据浏览器的字体大小设置缩放的情况下使用rem。
使用rem单位,除非你确定你需要 em 单位,包括对字体大小。
媒体查询中使用 rem 单位
不要在多列布局中使用 em 或 rem -改用 %。
不要使用 em 或 rem,如果缩放会不可避免地导致要打破布局元素。
我希望你现在已经建立了强健的、 完整的图片,到底 em 和 rem 的单位如何工作,并通过,知道如何最好地利用他们在你的设计中。
我鼓励您尝试为你自己使用本教程指南,它们会为您创建完全成熟的可伸缩性和响应性布局。
http://www.jianshu.com/p/82f02af17e78
3、vw
css3新单位,viewpoint width的缩写,视窗宽度,1vw等于视窗宽度的1%。
举个例子:浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。
4、vh
css3新单位,viewpoint height的缩写,视窗高度,1vh等于视窗高度的1%。
举个例子:浏览器高度900px, 1 vh = 900px/100 = 9 px。
4、vm
css3新单位,相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm
举个例子:浏览器高度900px,宽度1200px,取最小的浏览器高度, 1 vm = 900px/100 = 9 px。
由于现在vm的兼容性较差,这里就不做展示了。
3.常见问题
问题一:
为什么一开始在css样式中给body设置font-size:62.5%?
问题二:
在谷歌浏览器运行以下代码,1em是显示多大的字体?
body{
font-size: 62.5%;
}
p{
font-size:1em;
}
我的字体是多大?
4.解决方案
答案一:
Font-size=62.5%这就使em值变为16px*62.5%=10px。这样1em=10px,1.2em=12px利于我们进行换算。
答案二:
谷歌浏览器强制最小字体为12号,即使设置成 10px 最终都会显示成 12px,当把html的font-size设置成10px,子节点rem的计算还是以12px为基准。
5.扩展思考
css还有哪些长度单位?
in:寸
cm:厘米
mm:毫米
t:point,大约1/72寸
pc:pica,大约6pt,1/6寸
1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px