less+rem布局

1. rem ：相对单位 相对与html元素字体的大小
2. media Query 媒体查询 ：根据不同屏幕尺寸设置不同的样式,且重置浏览器大小 页面重新渲染

参数	语义
mediatype	查询类型 -all所有设备 print 打印机及预览 scree 电脑 平板 智能手机 屏幕
关键字	and 多个媒体属性连接在一起且 not 非 only 指定特定类型

  <style>
        @media screen and (max-width: 800px) {
            /*如果屏幕上最大宽度小于800px 下面成立*/
            .mead {
                background-color: gold;
                width: 100px;
                height: 100px;
            }
        }

        html {
            font-size: 14px;
        }
        .header {
            width: 10rem;
            height: 10rem;
            background-color: pink;
        }
    </style>

引入资源

    <link rel="stylesheet" href="xxx.css" media="screen and (min-width: 320px)">

3. less css的扩展 变量 运算 函数等功能

变量：（颜色 数值等）不能数字开头 大小写

@变量值：值

@myColor:pink;
@font14:14px;
.div1 {
  background-color: @myColor;
  font-size: @font14;
}

编译: Easy Less 插件自动生成 ctrl+s 生成css

允许嵌套： （伪类 ，伪元素，交集 选择器前用&）

@myColor:pink;
@font14:14px;
.div1 {
  background-color: @myColor;
  font-size: @font14;
  a {
  	&:hover{
  		color: #100;
  	}
    color: #000;
  }
}

运算： 数字颜色变量都可以运算（ +，-，*，/)
注意运算符旁边需要空格
如果两个单位不一样以第一个单位为准

@boder:5px + 5;
div {
  width: 100px - 50;
  height: 100px * 2;
  width: 100 / 2rem;
}

适配方案
1.less+媒体查询+rem
2.flexible.js+rem 淘宝