移动适配rem+vw/vh+less

一、rem

1.网页效果：屏幕宽度不同，网页元素尺寸也不同（等比缩放）

rem单位是相对与html标签的字号计算结果，1rem=1html字号大小。

使用得保证html标签有字号。

一般rem布局中html字号为视口1/10。

2.媒体查询

如果视口宽在375时，字号20生效，当视口为400时，不生效。

@media （媒体特性/width：375px） {
    选择器/html{
        css属性/font-size：20px；
    }
}
/*网页宽度小于等于1200的时候网页背景色为粉色*/  切记数值要从大到小写
@media (max-width:1200px) {
    body{
        background-color:pink;
    }
}
/*网页宽度大于等于1400的时候网页颜色为绿色*/   切记数值要从小到大写
@media (min-width:1400px) {
    body{
        background-color：green;
    }
}

3.配合flexible.js使用

2.-3.bootstrap3框架快速开发响应式布局

link引入使用。

类名：

.container     加了媒体查询显示不同宽度，加居中，加padding。/*版心*/ 默认有左右15padding。

.row  左右margin-15（负15），写在父级container下可以给子集添加，使间距中和。

.container-fluid      宽100%，左右padding15.

2.-3.1bootstrap3栅格系统

使用
<div>
    <div class="col-lg-3 col-md-6"></div>    /*大屏幕每份占3/12，一行排*/
    <div class="col-lg-3 col-md-6"></div>    /*中屏幕每份占6/12，两行排*/
    <div class="col-lg-3 col-md-6"></div>    /*采用浮动解决盒子排列，兼容*/
    <div class="col-lg-3 col-md-6"></div>
</div>

2.-3.2全局样式 ---cv大法link引入，引js需要多引一个jQuery.js/*因bootstrap.js应用了jquery.js*/

4.less预处理器----需要vscode下载less插件

后缀.less，扩充了css语言，使css有了逻辑性、计算能力。

浏览器不识别less代码，网页要引入css文件。

4.1less注释

单行注释：// 快捷键ctrl+/

多行注释：/**/ shift+alt+a

4.2less计算

加减乘除 键盘直接写，less4.0以后除法需要加小括号或者除前面加一个点 ，单位是啥后面跟啥。

width：（100/4px）；
width：100 ./ 4px；

4.3less嵌套

快速生成后代选择器

& ：表示不会生成后代关系选择器，表示当前选择器。/*方便代码迁移*/

父选择器{
    css代码
    子选择器{
    }
}

4.4less变量

 把颜色提前存储到一个容易，设置属性值为这个容器名。

        变量：存储数据，方便使用修改。

        语法：1.定义变量：  @变量名：值； 

        2.使用变量：css属性：@变量名；

4.5less导入其他less文件

一般写在开头

语法：  @import空格'文件路径';         @import空格‘01.less’；    @import空格‘01’；

        导入less文件可以不写后缀  

4.6less导出css文件

4.6.1在vscode里找 1.设置（ctrl+，）2.在settings.json中编辑 3.加入以下代码

 "less.compile":{
        "out":"../css/"
    },

4.6.2某个less单独导出css

确保写在less最前面      //  out：./abc/          // out： ./abc/01.css

4.7less禁止导出

此文件已经被其他文件导入，不需要再导出。

第一行添加  // out：false

二、vw/vh

vw：viewport-width              //  1vw=1/100视口宽度

vh:viewport-height               //   1vh=1/100视口高度

width:50vw;      // 50%视口的宽
height:30vw;     // 30%视口的高