移动端

谷歌模拟器：

1. 移动端宽度调试范围一般在320-768之间。
2. DPR：设备像素比：物理分辨率：逻辑分辨率；
3. 已停用节流模式-离线：测试网速对页面的影响；

// viewport 视口宽度
// device-width：视口宽度与当前设备宽度相等
// initial-scale 默认缩放比例
// user-scalable 用户点击缩放
// maximum-scale 允许用户最大缩放比例

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0" />

rem / vw

1. rem与vw是一种相对单位，可以使样式在不同窗口下自适应。
2. rem需要配合flexible.js使用
3. 与rem不同，vw在插件的使用下，可以直接转换单位来实现视口自适应 注意：
4. 1rem等于1html，无论后面嵌套的元素是否设置px，rem最终会以html的大小执行
5. viewport width视口宽度 1vw=1/100，viewport height视口高度 1vh=1/100

媒体查询

• 作为视口范围取值，一般取值max-width、max-width

// 超小屏幕（手机，小于 768px） 
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

less

1. ctrl+/ 单行注释，css不会显示；shift+alt+a 多行注释，css中会显示

2. less在大盒子中可以设置所有后代选择器的样式，保存后css会自动编译

3. html引用时，只能引用css。

4. less使用除法时"./"会被VSCode报错，但less是支持"./"的写法；可使用另一种写法width:(500/100px);用"()"括号区分其他复合写法。

5. 表达式中出现多个单位，以第一个单位为准：height:300px+200deg+10rem;换算结果：height510px;

6. 表达式的" + - * ./ "书写必须保持一致，否则无法换算。

7. 书写hover与伪元素时，在前面添加"&"符号，表示不生成后代选择器，是上级的直接样式。

8. 使用变量： @变量名:值;

9. @import url()；/ @import '引入less文件'；在less文件中导入的文件必须是less文件，两种方法使用其一即可。

10. 在less中的第一行将css导出至css文件夹：”// out: ../css/“注意导出的css类型是文件夹，必须是“ / ” 结尾，否则只是css文件。

禁止导出：// out : false

压缩导出：// compress : true