笔记9：rem适配布局

1、基础

 1）Rem是一个相对单位，相对于html的字体大小 
 2）如果整个页面很多地方用rem进行布局，只需要在不同屏幕下修改html的字体大小，那么整个页面都会同步变化

2、媒体查询

 1）媒体查询是css3语法，可以实现根据不同屏幕适配不同的样式 、
 2）语法结构为：@media screen and (max-width:800px) {css样式}

 注意点：
    1、screen和and必须带上

案例实现思路：

案例1、根据页面宽度改变背景颜色
1）按照从大到小的或者从小到大的思路
2）注意我们有最大值max-width和最小值min-width都是包含等于的
3）当屏幕小于540像素，背景颜色变为蓝色（x<=539)
4)当屏幕大于等于540像素并小于等于969像素，背景为绿色（540<=x<=969)
5)当屏幕大于等于970像素，背景为红色（x>=970)
/* 1、小于540px背景为蓝色 /
@media screen and (max-width:539px) {
body{
background-color: blue;
}
}
/ 2、当屏幕大于等于540像素并小于等于969像素，背景为绿色 /
@media screen and (min-width:540px){
body{
background-color: green;
}
}
/ 3、当屏幕大于等于970像素，背景为红色 */
@media screen and (min-width:970px) {
body{
background-color: red;
}
}

3、媒体查询引入资源

  当样式比较繁多时，可以针对不同媒体使用不同的stylesheets（样式表）
  原理：直接link中判断设备尺寸，然后引用不同css文件
  <link rel="stylesheet" href="css/style320.css" media="screen and (min-width:320px)">

4、less基础

(1)less变量：css中颜色和数值等经常使用

  定义：@变量名：值；
  变量命名规范：
   1）必须有@为前缀
   2）不能包含特殊字符
   3）不能以数字开头
   4）大小敏感

（2）编译：将less文件编译成css文件
  安装vocode Less插件：Easy Less，保存less文件自动生成css文件

（3）嵌套
   如果遇见（交集|伪类|伪元素选择器）
    内层选择器的前面没有&符号，则它被解析为父选择器后代
    如果有&符号，它就被解析为父元素自身或父元素的伪类


(4)运算：可以给变量进行一些运算操作，例如加 +、 减 -、乘 *、除 / 四个运算符，这四个运算符可以对任何数字、颜色或变量进行运算。一般运算符在进行加、减计算之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。
       注意： 
        1、运算符的左右两侧必须敲一个空格隔开
        2、两个数参与运算，如果只有一个数有单位，则最终结果以这个单位为准；
        3、两个数参与运算，如果2个数都有单位，而且不一样，则以第一个单位为准
        4、乘号（*）、除号（/）

5、rem适配方案

 rem实际开发适配方案
  1）按照设计稿与设备宽度的比例，动态计算并设置html根标签：font-size大小
  2）css中，设计稿元素宽、高、相对位置等取值，按照等比例换算为rem为单位的值
   
   技术方案1：
    1）less
    2)媒体查询
    3）rem

  技术方案2：
   1）flexible.js
   2)rem单位.html

  总结：1、两种方案都存在
       2、方案2更简单