移动Web-05-rem布局

01-使用场景

需要同时适配宽度和高度，以及文字大小,

02-rem与em的区别

​ 1.相同点
都是相对单位

​ 2.不同点
相对的参照物不同

​ em：相对的是元素自身的字体大小

​ rem：相对于的根元素（html）的字体大小,1rem = html元素字体大小

03-rem布局注意点

1.一般使用rem布局，都需要设置html字体大小

2.实际开发中，一般设置 html字体大小 = 1/10 屏幕宽度
​ 也就是说，通过动态设置html字体大小，实现 1rem = 1/10 屏幕宽度
(设置为1/10其实是为了以后能够兼容vw和vh)

3.动态设置html字体大小为手机当前屏幕 1/10的两种方式

• a.使用js代码（推荐）
• b.使用css媒体查询

04-自动计算rem插件-cssrem

步骤
1.安装插件

2.设置(注意二倍图，如果你的设计图稿是640，表示屏幕尺寸是320，那么你的1rem = 32)


3.重启生效