CSS3----移动端自适应rem

【前言】：今天分享一下移动端自适应

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

CSS绝对单位 PS：绝对单位通常使用在打印方面

CSS相对单位

CSS单位浏览器兼容性

CSS重要单位集合：
①px像素Pixel，绝对长度单位，相对于显示器屏幕分辨率而言的。
②em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
③rem是CSS3新增的一个相对单位（root em，根em），使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
④%一般宽泛的讲是相对于父元素
⑤vw与vh视窗单位，vmax与vmin可以判断屏幕横竖屏

CSS单位—em

1、简介：
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未设置，则相对于浏览器的默认字体尺寸16px。
2、特点：
① em的值并不是固定的
②em会继承父级元素的字体大小
3、默认计算方式
浏览器的默认字体大小都是16px，所以1em=16px，那么10px=0.625em

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190919100754899.png
4、继承性
em是一个相对的单位，是当前元素相对于当前对象字体的大小而言的
如果父元素没有设置字体大小，则相对于浏览器默认字体大小而言的

CSS单位—%

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

CSS单位—ex&ch

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

rem简介：rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。

js实现rem转换

JS动态设置根元素字体大小
（1）获取根元素字体大小
document.documentElement.style.fontSize
（2）获取屏幕可视区域窗口宽度
document.documentElement.clientWidth
计算语法：
document.documentElement.style.fontSize
=
document.documentElement.clientWidth / 750*100 + ‘px’;

@media实现rem转换