移动适配（rem方法）

移动适配

分类：rem（旧方法）vw/vh （未来解决方案）

rem

1、相对单位

2、rem单位相对于HTML的字号计算

3、1rem= 1HTML字号大小

HTML标签(根标签)

媒体查询

媒体查询可以检测视口的宽度，然后编写差异化的CSS

@media(width:375px) {
        html {
            font-size:37.5px;
        }
}

rem布局方案中，HTML标签的字号为视口宽度的1/10

rem单位的尺寸

rem单位 = px单位数值/基准根字号 // rem = 68px/37.5rem

flexible.is

使用flexible.js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放的效果

根据不同视口宽度给网页中html根节点设置不同的font-size

添加位置：

在body结束之前添加

<script src="flexible.js的路径"></script>

Less的使用

less可以解决计算问题，less是一个预处理器，后缀名为.less

注意：浏览器不会识别less文件，在html文件中需要引入css文件

less注释

单行注释：// 快捷键：ctrl+/

多行注释：/* */ 快捷键 shift+alt+A

less的计算

加、减、乘 可以直接使用

除法需要添加小括号或点

width