移动端web开发第5天

1、rem移动适配

目的：屏幕宽度不同，网页元素尺寸不同（等比缩放）

• 相对单位
• rem单位是相对于HTML标签的字号计算结果
• 1rem = 1HTML字号大小
• 目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10

1.1、媒体查询

• 写法

  
  

2、Less语法

• Less是一个CSS预处理器, Less文件后缀是.less
• 扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
• 注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。

2.1、注释

单行注释

• 语法：// 注释内容
• 快捷键：ctrl + /
  块注释
• 语法：/* 注释内容 */
• 快捷键： shift + alt + A

2.2、运算

• 加、减、乘直接书写计算表达式
• 除法需要添加 小括号 （）或 ./
  
  注意：表达式存在多个单位以第一个单位为准（如px)

2.3、Less嵌套

• 生成后代选择器

• & 符号，它就被解析为父元素自身或父元素的伪类

2.4、Less变量

定义变量：@变量名: 值;
使用变量：CSS属性：@变量名;

2.5、Less导入

2.6、Less导出

注意：Less文件第一行添加如下代码, 注意文件夹名称后面添加 /

2.7、禁止导出

• 在less文件第一行添加: // out: false