响应式布局

现在响应式没有以前那么火了，因为响应式有一个缺点，它需要加载所有资源，即使是没有显示的，很浪费资源，影响用户体验，但是日常开发中，我们仍需要使用它进行一些开发。

---

原理：媒体查询

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
// 解释：width = device-width：宽度等于当前设备的宽度

<style>
@media  媒体类型  and   ( 媒体特性 ) {
      .container { 
            width：970px
      }
}
</style>

媒体类型：all 、print、scree

媒体特性：对于scree来说，width、min-width、max-width。当满足媒体类型和媒体特性的同时，会执行后续代码

规则：① 按照从大到小、从大到小的顺序来执行  ② 数字后面的单位不可以省略

类型：

①：样式响应

     

①：引入资源

当响应式布局页面变化比较大的时候，可以准备两套CSS，通过响应式的引入两套CSS文件，来实现响应式布局。（ 对比正常链接🔗  <link rel="stylesheet" href="text.css" /> ）

REM适配方案技术（主流）

方案二：flexible是淘宝做的插件，然后将屏幕分成十份。用的时候，第一步：下载文件；第二步：在index.html引用；第三步：直接在对应CSS里面用rem代替px做单位

 

less使用指南

less转换为CSS

less注意点：