web 的px,em,rem,%,vw,vm,vh介绍

（非原创，转载记录）
1.背景介绍

我们为什么要选择合适的网页设计单位

随着Web的发展，对新的解决方案的需求也会继续增大，对网页的要求更高。

网页设计单位是涉及到我们布局的效果，使用不同的单位会对最终的demo，会有影响。

现在都是要求响应式设计，需要适配各种设备，电脑，手机，平板。如果单位不合适，可能在这个设备显示良好，那个设备就会打乱布局。

所以需要我们选择合适的单位来进行开发，设计。
2.知识剖析

1、px

px就是pixel的缩写，意为像素。px就是设备或者图片最小的一个点，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。

是我们网页设计常用的单位，也是基本单位。通过px可以设置固定的布局或者元素大小，缺点是没有弹性。

特点是1. em的值并不是固定的； 2. em会继承父级元素的字体大小。

2、em

参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
特点是1. em的值并不是固定的； 2. em会继承父级元素的字体大小。
3、rem

rem是相对于根元素html，这样就意味着，我们只需要在根元素确定一个参考值，可以设计HTML为大小为10px，到时设置1.2rem就是12px.以此类推。

优点是，只需要设置根目录的大小就可以把整个页面的成比例的调好。

4、%

一般来说就是相对于父元素的，

1、对于普通定位元素就是我们理解的父元素 2、对于position: absolute;的元素是相对于已定位的父元素 3、对于position: fixed;的元素是相对于ViewPort（可视窗口），
5、vw

css3新单位，view width的简写，是指可视窗口的宽度。假如宽度是1200px的话。那10vw就是120px

举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

6、vh

css3新单位，view height的简写，是指可视窗口的高度。假如高度是1200px的话。那10vh就是120px

举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。

7、vm

css3新单位，相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm 举个例子：浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px。

兼容性太差 ，现在基本上没人用，我试了一下Chrome就用不了。

3.常见问题

假如使用em来设置文字大小要注意什么？

4.解决方案

注意父元素的字体大小，因为em是根据父元素的大小来设置的。比如同样是1.5em，要是父元素是20，那1.5em就是30px.要是父元素是30px,1.5em就是45px.

特别是在多重div嵌套里面更要注意。

5.扩展思考

css还有哪些长度单位？

in:寸

cm:厘米

mm:毫米

t:point，大约1/72寸

pc:pica，大约6pt，1/6寸

6.更多问题
1.pc pt ch一般用在什么场景?
这些我们网页设计基本上用不到，在排版上会有用处。

2.如何使 1rem=10px
在设置HTML{font-size：62.5%；}即可

3.如果父元素没有指定高度，那么子元素的百分比的高度是多少？
会按照子元素的实际高度，设置百分比已经没有效果了。

文章转自
文章出处
https://blog.csdn.net/weixin_42192534/article/details/80289782