移动端布局之rem布局

rem布局
rem布局的原理
就是根据不同的屏幕大小来实现等比缩放
方法：
根据不同的屏幕大小来设计html根元素字体大小

rem单位
rem相对于html元素的font-size动态计算的单位
优点可以通过修改html的font-size大小整体控制元素的大小
如果html元素的font-size:12px, 其他元素的width:2rem;那么换算成px就是24px;

媒体查询(Media Query)
主要用screen、 all、print2个属性不用
@media根据不同的屏幕尺寸改变不同的样式

媒体查询语法规范
用 @media开头 注意@符号
mediatype 媒体类型
关键字 and not only
media feature 媒体特性必须有小括号包含
语法
@media mediatype and|not|only (media feature) {
CSS-Code;
}

建议:为了防止混乱、媒体尺寸尽量从小往大写

less的使用
less是一门预处理语言、扩展css动态特性
语法：@变量名：值；
变量指的是没有固定的值、可以改变的量
规范：
必须有@为前缀
不能包含特殊字符
不能以数字开头
大小写敏感

less嵌套
less语句是写在父元素里的
如果遇见（交集|伪类|伪元素选择器）、利用&进行连接
&就是自己本身、或者父元素的伪类
(没有&）空格是后代

less运算
乘号（*）和除号（/）的写法
运算符中间左右有个空格隔开 1px + 5
对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
如果两个值之间只有一个值有单位，则运算结果就取该单位
运算符的左右必须敲一个空格隔开

总结：就是从左到右以第一个单位为准

rem=（标准尺寸除以固定的份数）/html文字的大小