[关闭]
@buoge 2017-12-18T23:01:56.000000Z 字数 1237 阅读 1367

em , rem 的区别,vw、vh、vm

前端


https://webdesign.tutsplus.com/zh-hans/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984

  1. 让我们以一个快速符号点概括我们介绍的内容:
  2. rem em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。
  3. em 单位基于使用他们的元素的字体大小。
  4. rem 单位基于 html 元素的字体大小。
  5. em 单位可能受任何继承的父元素字体大小影响
  6. rem 单位可以从浏览器字体设置中继承字体大小。
  7. 使用 em 单位应根据组件的字体大小而不是根元素的字体大小。
  8. 在不需要使用em单位,并且需要根据浏览器的字体大小设置缩放的情况下使用rem
  9. 使用rem单位,除非你确定你需要 em 单位,包括对字体大小。
  10. 媒体查询中使用 rem 单位
  11. 不要在多列布局中使用 em rem -改用 %。
  12. 不要使用 em rem,如果缩放会不可避免地导致要打破布局元素。
  13. 我希望你现在已经建立了强健的、 完整的图片,到底 em rem 的单位如何工作,并通过,知道如何最好地利用他们在你的设计中。
  14. 我鼓励您尝试为你自己使用本教程指南,它们会为您创建完全成熟的可伸缩性和响应性布局。

vw、vh、vm

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

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注