rem 适配布局 + LESS + 媒体查询

1. rem 基础

　rem 是一个相对单位，类似于 em ，em 是父元素字体大小。

　em 是相对于父元素  的字体大小来说的

　rem 是相对于 html 元素 字体大小来说的

　rem 优点 就是可以通过修改 html 里面的文字大小来改变页面中元素的大小可以整体控制

　比如：根元素（html ）设置的 font-size=12px；非根元素设置 width：2rem；则换成px 表示 24px（12px*2rem）

2. 媒体查询（@media）

　@media 可以针对不同的屏幕尺寸设置不同的样式

　语法规范：

@media  mediatype  and | not | only (media feature){

　　CSS - Code;

}

• 用 @media  开头
• mediatype  媒体类型     

　　all：用于所有设备，

　　print：用于打印机和打印预览，

　　screen：用于电脑屏幕，平板电脑，手机等

• 关键字 and  not   only   

　　and：可以将多个媒体特性连接到一起，相当于“且”的意思

　　not：排除某个媒体类型，相当于“非”的意思，可以省略

　　only：指定某个特定的媒体类型，可以省略

• media  feature 媒体特性 必须有小括号包含

　　width：定义输出设备中页面可见区域的宽度

　　max-width：定义输入设备中页面最大可见区域宽度

　　min-width：定义输入设备中页面最小可见区域宽度

　案例：

@media screen and（max-width：500px）{

　　body{

　　　　background:pink;

　　}

}

　注意点：

1. screen 还有 and 必须带上，不能省略

2. 小括号中的 数字 后面必须跟单位，970px  这个 px 不能省略

3. 媒体查询最好的方法就是从小到大

3. 媒体查询 + rem 实现元素动态大小变化

　rem 单位是跟着 html 来走的，有了 rem 页面元素可以设置不同大小尺寸

　媒体查询可以根据不同设备宽度来修改样式

　媒体查询 + rem 就可以实现不同设备宽度，实现页面元素大小的动态变化

4. 引入资源（理解）

　当样式比较繁多的时候，可以针对不同的媒体使用不同 stylesheet（样式表）。

　原理，直接在 link 中判断设备的尺寸，然后引入不同的css文件。

　语法规范：

<link  rel = "stylesheet"  media = "mediatype   and | not | only (media  feature)"  href = " style.css" >

　案例：

<link  rel = "stylesheet"  media = "screen  and （min-width:320px）"  href = " style320.css" >

<link  rel = "stylesheet"  media = "screen  and  （min-width:640px）"  href = " style640.css" >

5. Less基础

　Less 变量：变量是指没有固定的值，可以改变的，因为CSS中的一些颜色和数值等经常使用，样式后缀名.less 。

　@变量名：值；

　1. 变量名规范

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

　案例：

@color：pink；// 定义变量

body{

　　color：@color；  // 使用变量

}

　2. 编译

通过vscode中的插件 Easy LESS 编译为 css 文件，只要保存一下 Less 文件，会自动生成 CSS文件

　3. Less 嵌套

1.内层选择器的前面没有 & 符号，则它被解析为父选择器的后代

　　CSS中选择器嵌套：

　　#header .logo{

　　　　width:10px;

　　}

　　Less 嵌套写法：

　　#header{

　　　　.logo{

　　　　　　width:10px;

　　　　}

　　}

　2. 如果有 & 符号，它就被解析为父元素自身或父元素的伪类（交集|伪类|伪元素选择器）

　　　CSS中选择器嵌套：

　　　a:hover{

　　　　　color:red;

　　　}

　　　Less 嵌套写法：

　　　a{

　　　　　&：hover{

　　　　　　　color:red;

　　　　　}

　　　}

3.Less 运算

　less 中运算 可以使用 加（+），减（-），乘（*），除（/）四种运算

　运算符中间左右有个空格隔开 1px  +  5

　对于两个值之间只有一个值有单位，则运算结果就取该单位

　对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位

案例：

@font：50px；

@border：5px +5；

div{

　　width：200px - 50；

　　height：200px * 2；

　　border：@border  solid #ccc;

　　img{

　　　　width:82rem / @font;   //1.65rem

　　}

}

6. rem + less + @media 开发

　动态设置 html 标签 font-size 大小

① 假设设计稿是 750px

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

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

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

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

⑥ 比如 以 750px 为标准设计稿

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

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

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