移动适配

1、长度单位
rem :
① 相对单位
② rem单位是相对于HTML标签的字号计算结果
③ 1rem = 1HTML字号大小

2、rem移动适配 -媒体查询

• 写法：

  
  
  

flexible 使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果

• flexible.js是手淘开发出的一个用来适配移动端的js框架
• 核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size

Less语法

使用Less语法快速编译生成CSS代码
注释：

• 单行注释：
  ① 语法：// 注释内容
  ② 快捷键：ctrl + /
  
• 块注释 ① 语法：/* 注释内容 */
  ② 快捷键： shift + alt + A
  
  Less嵌套写法生成选择器:
  

//后代选择器           //子代选择器 
.father {             .father {
  .son {}                 >.son{}
  }                      } 

less导入：
@import “文件路径”;

栅格系统

作用：响应式布局

原理：将网页等分成12份，每个元素占对应的份数。
使用：

• 大屏：>=1200px , col-lg-* (份数)，版心：1170px;
• 中屏：>=992px , col-md-* (份数)，版心：970px;
• 小屏：>=768px , col-sm-* (份数), 版心：750px;
• 超小屏：<768px , col-xs-* (份数)，版心：100%