2020.7.15 星期三 19：34

单位-大小

百分比

padding 百分比是相对于元素的宽度.(对于需要保持高宽比的图，应改用 padding-top== 实现)

相对于根元素 html。

html 设置font-size: 10px 或者62.5%
页面所有元素可直接使用。 20rem === 200px
此时，html页面字体并不会显示/计算属性 12px（chrome默认最小显示字体大小12px）。
不过，通过html 10px或者62.5 计算页面内元素的rem 的font-size值仍然是正确的。即 2rem === 20px
只有body会继承html 的10px。此时可以在body中重新设置页面的默认字体大小，比如14px。 body{font-size: 1.4rem;}

#### 为什么是62.5%
10/16 = .625 。以10为基数，方便计算。即1rem = 10px

移动端自适应分辨率，通过js 动态设置html的fontSize值。
ui 设计图是320px。则 html{font-size: clentWidth/320 * 10 }

认识视口单位（ Viewport units )
而视口单位中的“视口”，在桌面端，毫无疑问指的就是浏览器的可视区域；但是在移动端，它指的则是三个 Viewport 中的 Layout Viewport 。

根据CSS3规范，视口单位主要包括以下4个：
vw : 1vw 等于视口宽度的1%
vh : 1vh 等于视口高度的1%
vmin : 选取 vw 和 vh 中最小的那个
vmax : 选取 vw 和 vh 中最大的那

例如，在桌面端浏览器视口尺寸为650px，那么 1vw = 650 * 1% = 6.5px（这是理论推算的出，如果浏览器不支持0.5px，那么实际渲染结果可能是7px）。

包括字体也可以设置.
移动端单位，浏览器也可以用

那么100vw和我们平时用的width:100%有什么区别呢？

百分比%是根据父元素宽度或者高度进行计算，而vw vh固定按照viewport来计算，不会受父元素宽高度影响。
100vw包括了页面滚动条宽度（页面滚动条属于viewport范围内，100vw当然包括了页面滚动条宽度）。
但把body或者html设置为width:100%时，是不包括页面滚动条的宽度的。也就是说100vw在有纵向滚动条的情况下，会比100%宽。那么就会引发一个问题：pc端使用vw单位时，如果页面内容超出一屏长度，出现了纵向滚动条，同时有元素width:100vw，则会导致出现条横向滚动条，因为元素（100vw + 滚动条宽度）超出了viewport宽度。（移动端滚动条不占位，所以不会有这个问题）不过pc端一般不需要弹性布局，还是尽量使用width:100%更保险。
兼容性
在移动端 ios 8 以上以及 Android 4.4 以上获得支持，并且在微信 x5 内核中也得到完美的全面支持。
相较之下，vw单位兼容性比rem稍差，ios8、安卓4.4及以上才完全支持。这也是为什么之前rem布局一直更流行的原因。

微信小程序像素/大小单位

%:百分比
in:寸
cm:厘米
mm:毫米
pt:point，大约1/72寸

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

ex：取当前作用效果的字体的x的高度，在无法确定x高度的情况下以0.5em计算(IE11及以下均不支持，firefox/chrome/safari/opera/ios safari/android browser4.4+等均需属性加么有前缀)

ch:以节点所使用字体中的“0”字符为基准，找不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)

18:44