移动端rem适应布局

移动端rem适应布局

rem

rem（root em）是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如，根元素（html）设置font-size=12px；非根元素设置width：2rem；则换成px表示24px

媒体查询

使用@media查询，可以针对不同的媒体类型定义不同的样式@media可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程，页面也会根据浏览器的宽度和高度重新渲染页面目前针对很多苹果手机，android，平板等设备都用得到多媒体查询语法规范

@media media激励书type and|not|only(media feature事故处理){css-code}

媒体类型值解释说明all用于所有设备print用于打印机和打印预览scree用于电脑屏幕，平板电脑，智能手机

关键字

and：可以将多个媒体特性连接到一起，相当于“且”的意思not：排除某个媒体类型，相当于“非”的意思，可以省略only：指定某个特定媒体类型，可以省略

媒体特性

【注意】要用小括号进行包含

值解释说明width定义输出设备中页面可见区域的宽度min-width定义输出设备中页面最小可高职高专和大专的区别见区域宽度max-width定义输出设备中页面最大可见区域宽度

less介绍

less是一门css扩展性语言，也称为css预处理。作为哦css的一种形式的扩展，他并没有减少css的功能，而是在现有的css语法上，为css加入程序式语言特性。

他在css的语法基础上，引入了变量，mixin（混入），运算以及函数等功能，大大简化了css的编写，并且降低了css的维护成本，

网址：http://lesscss.cn

常见预处理器：sass，less，stylus

less使用

首先新建一个后缀名为less的文件，在这个less文件里面书写less语句

less变量

变量是指没有固定的值，可以改变的，

@变量名：值

命名规范

必须有@为前缀不能包含特殊字符不能以数字开头大小写敏感

less编译

less嵌套

less运算

less编译

vocode less插件easy less插件用来把less文件编译为css文件

les孤芳自赏意思是什么意思s嵌套

内层选择器的前面没有&遥控器丢了怎么办;符号，则他被解析为父选择器的后代如果有&符号，他就被解析为父元素自身或者父元素的伪类

less运算

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