移动端 移动自适应 移动端meta元标签

【前言】2019.9.19

【内容】 移动端 移动自适应 移动端meta元标签…

（1）浏览器的默认字体大小：16px
（2）chrome字体最小限制：12px
（3）CSS单位分为绝对单位和相对单位

CSS中，单位分为两类
（1）绝对单位：无论其他相关的设置怎么变化，绝对单位指定的值是不会变化的；
（2）相对单位：没有固定的度量值，是由其他元素尺寸来决定的相对值。

CSS绝对单位

CSS相对单位

CSS单位浏览器兼容性

默认计算方式
浏览器的默认字体大小都是16px，所以1em=16px，那么10px=0.625em

继承性
em是一个相对的单位，是当前元素相对于当前对象字体的大小而言的；
例如：父元素设置font-size: 32px ，子元素设置font-size: 1em ，那么子元素的字体大小也是32px。如果父元素没有设置字体大小的话，就是想对于浏览器默认的字体大小而言的

一般宽泛的讲是相对于父元素，但是并不是十分准确，分为以下几种情况。
①对于普通定位元素就是我们理解的父元素
②对于position: absolute;的元素是相对于已定位的父元素
③对于position: fixed;的元素是相对于ViewPort（可视窗口)

ex 和ch 单位，依赖于当前字体font-family 和字体大小 font-size。
ex 指当前字体环境中小写字母x 的高度；
ch 指当前字体环境中数字 0 的宽度。

什么是rem？
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
看到rem会想起em单位，em（font size of the element）是指相对于当前对象内字体大小的单位。它们之间其实很相似，只不过一个宽高计算是依赖根元素字体大小，另一个是依赖当前对象或祖先的字体大小计算。

rem计算验证：
因为浏览器默认字体大小为16px，则1rem=16px。如果想设置一个元素的宽高为100px，计算起来较为麻烦，所以一般做法为html {font-size: 62.5%;}
即将根元素字体大小缩为