移动WEB移动适配

rem

相对html字号计算

媒体查询设置差异化CSS样式

目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10

• rem单位的尺寸 = px单位数值 / 基准根字号

flexible js

• lexible.js是手淘开发出的一个用来适配移动端的js框架

  • 核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size

less

实现在px单位转换到rem单位，CSS不支持除法

注释

• 单行注释：ctrl + /
• 块注释：shift + alt + A

运算

• 加、减、乘直接书写计算表达式，除法需要添加 小括号 或 . ，表达式存在多个单位以第一个单位为准

嵌套

• &不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用

变量

• 定义

  • @变量名: 值;

• 使用

  • CSS属性：@变量名;

导入

• @import “文件路径”;

  • @import “base”;

导出

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

• 在less文件第一行out:../css/

• 禁止导出

  • 在less文件第一行out：false

• 导出压缩文件

  • 在less文件第一行添加: // compress: true

• 生成sourceMap文件

  • 在less文件第一行添加：// sourceMap: true

• 如果有多个属性需要设置，使用逗号分隔即可

vw/vh

相对视口的尺寸计算

vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )

• 1vw = 1/100视口宽度
• 1vh = 1/100视口高度