rem布局

rem单位

rem是一个相对单位，类似em,em是父元素字体大小
不同的是rem的基准是相对于html元素的字体大小

媒体查询

使用媒体查询，可以针对不同的媒体类型定义不同的样式
@media可以针对不同的屏幕尺寸设置不同的样式
all   用于所有设备
print  用于打印机
screen  用于电脑屏幕、手机、平板
媒体查询后边要跟小括号，小括号设置屏幕宽度
width   可见宽度
min-width   大于等于的屏幕宽度
max-width   小于等于的屏幕宽度

less

再css中无法进行计算，这时候用less做预处理。less提供 + - * /运算
安装    npm  install  -g  less
检查是否安装成功   less  -v

使用：
@变量名：值
必须有@为前缀
不能包含特殊字符
不能以数字开头
大小写敏感

rem适配方案

1.less+rem+媒体查询

①假设设计稿是750px

②假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）

③每一份作为html字体大小，这里就是50px

④那么在320px设备的时候，字体大小为320/15就是  21.33px

⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的

⑥比如我们以750为标准设计稿

⑦一个100*100像素的页面元素在  750屏幕下，  就是 100/ 50  转换为rem  是  2rem*2rem  比例是1比1

⑧320屏幕下，  html字体大小为21.33   则 2rem=  42.66px  此时宽和高都是 42.66  但是宽和高的比例还是 1比1

⑨但是已经能实现不同屏幕下  页面元素盒子等比例缩放的效果

总结