移动web

一，rem

单位：相对单位和绝对单位

相对单位：

      em 参考当前容器的文字大小
      rem 参考根标签html标签的文字大小

绝对单位：

px，deg，s，ms

2. 媒体查询查询不同的媒体设备用不同的css样式

  语法 
  @media （width：300px）{
             html{
             font-size:30px
             }
     }

1）移动端适配：利用媒体查询针对各个屏幕尺寸去设置一个不同的根标签字体大小，开发者书写的是一个固定的rem值，根据rem是要乘以根标签字体大小去计算的原理，来实现适配，但是它过于麻烦。

2）手机淘宝团队封装的flexible.js框架配合px to rem 插件快速实现适配 ① flexible.js：利用js的方式给每一个屏幕尺寸都设置了一个根标签的字体大小（当前屏幕宽度的尺寸/10）引入方式利用

`<script src="./js/flexible.js"></script>`

② 如何得到rem值

？ rem * 37.5 = 你测量出的数值

？ rem = 测量出的数值 / 当前ui设计师给予的设计稿对应的根标签字体大小

例如：

 ui给的设计稿尺寸是750，2倍图，那么设计稿的真实尺寸是375，根标签字体大小则为37.5

【 px to rem 插件：ctrl + a 然后 alt + z 可以快速将px-rem rem-px】

以下是插件配置步骤

二，less语法

css预处理语言，由于浏览器不认识less文件，所以我们要对less文件做一个预处理操作，less编译成浏览器能够看懂的css文件，最后在html文件中引入css文件
语法糖（糖衣语法）便于开发者进行快速开发的语法规则，按照语法糖去进行开发，可以让代码变得更加有逻辑，复用性更强，减少出错的概率

常见的css预处理语言

   【less，@】【（sass / scss）】【stylus（没有符号括号分号等）】

语法

1）编译

【easy less插件】在保存的同时在同级目录自动生成一个同名的css文件

2）注释

① 单行注释（cyrl + /）不会编译到css中 ② 多行注释（shift + alt + a） 3）变量

@符号自定义的变量名：值；

例如：

#theme_color:#fff;

【注意点】：

① 变量结尾一定要有分号 ② 调用变量名的时候也要带分号 ③ 定义变量一般写在整个文档的顶部

4）导入

① 【语法：@import：“要引入的less文件路径”；】 ② 【注意点】：

和变量语法及其类似，要注意区分
import后面是空格
导入的只能是less文件，如果路径有误，则无法编译
后缀名 . less可以省略
当 A . less 文件导入了 B . less 文件，在 B . less 文件修改了，需要在 A . less 中再次保存，才能编译到css文件中

5）嵌套

① 【语法】：

     .son{
          width: 100px;
          &:hover {
                color: #00a; 
            }
          }
         }

等于
	.box .son {
       width: 100px;
          }
.box .son:hover{
      color: #00a;
      }

【&符号可以去掉后代选择器的空格，多应用于伪类，伪元素选择器】

② less 中的计算

+ 加   - 减   * 乘   （100px / 10px） 除 
如果有多个单位的话，则取第一个单位为最终单位

6）导出

① 【//out：../css/】【//out：false 禁止导出】

当前代码只能写在第一行，以单位注释方式出现

7） css压缩

① 【//compress：true】把输出的css文件进行压缩（去掉多余的换行空格和分号减少css文件的体积）

② sourceMap：希望浏览器提示出less的行号

连写：//compress：true，out：//css/，sourceMap：true

8） scc原生语法中的运算

① calc（100px + 100px）； ② 语法较为严格：加法和减法运算符前后必须加空格，单位是参与运算的

 calc（100px + 100px）；正确
 calc（100px + 100）；不正确
 calc（100px * 100）；正确
 calc（100px + 100px）；不正确

三，配置标签高亮

【插件：Highlight Matching Tag】

 代码：
  "highlight-matching-tag.styles": {
"opening": {
  "name": {
    "highlight": "#ff0"
   }
 }
}

四，配置括号高亮

   代码：
         "editor.bracketPairColorization.enabled": true,
         "editor.guides.bracketPairs": true,

，

移动适配-less-媒体查询-rem适配

移动web

一，rem

二，less语法

三， 配置标签高亮

四，配置括号高亮

三，配置标签高亮