前端自学笔记6：移动适配

1、移动适配意义

对不同设备的视口宽度，可以很好地调整网页元素的宽高。

2、移动适配解决方案

①rem：目前多数企业在用的解决方案
②vw/vh：未来的解决方案

3、解决方案一：rem

• 定义
  rem实际是一个相对单位，使网页元素等比缩放。相对HTML标签的字号计算结果，1rem=1HTML字号大小。
• 例如：
  设置html字号大小为20px，则 1rem = 20px。
  使用媒体查询检测视口宽度，设置不同的css样式

@media (媒体特性) {
	选择器 {
		css属性
	}
}
#例如：（表示视口宽度为375px时，设置html字号为40px）
@media (width:375px) {
    html {
        font-size: 40px;
    }
}

• 可以设置多个@media
  这里表示如果视口宽度375，则设置html字号为40px；如果视口宽度为320px，则设置html字号为30px。
  
• 一般情况下，rem布局方案中，将网页10等分，html字号为视口宽度的1/10
  技术支持包括：媒体查询、flexible.js
• flexible.js配合rem实现在不宽度设备上中，尺寸的等比例缩放
  原理是根据不同视口宽度给网页中html根节点设置不同的font-size。
  代码：

#在body的最低端引入flexible.js
<script src="../js/flexible.js"></script>

4、Less语法

less：是一个css预处理器，能将css写法变得灵活的工具。
比如可以自动计算除法：

实现步骤
第一步：
vscode扩展包下载：easy less

第二步：
创建.less文件，并且写入想要的样式
例如：

.father {
    color: red;
    width: (68 / 37.5rem);   #这里可以直接输入想要相除的数
    .son {
        background-color: pink;
    }
}

第三步：
保存.less文件，vscode会自动在less文件统计目录下生成.css文件
生成的css文件内容：

.father {
  color: red;
  width: 1.81333333rem;   #这里是自动计算的除法结果
}
.father .son {
  background-color: pink;
}

注释

• 单行注释
  语法：//注释内容
  快捷键：ctrl + /
• 块注释
  语法：/块注释内容/
  快捷键： shift + alt + A

加减乘除运算

加 + 减 - 乘 * 除 / (使用除法需要加小括号，或者在 / 前加小数点)
使用less自动生成css文件的效果如下：
ps：在less中使用小数点会报错，但是可以正常转化为css文件。

less嵌套语法生成后代选择器

语法：

.父集选择器 {
    //父集样式
    .子集选择器 {
        //子集样式
    }
}

例如：

另外：使用 &，不会生成后代选择器，表示当前选择器。

使用less变量设置属性值

变量：将属性存储到一个容器，设置属性值为这个容器
语法：

#定义变量
@变量名:值;
#使用变量
css属性:@变量名;

使用less导入写法引用其他less文件

语法：（less文件开头第一行）

@import ‘文件路径’；

如果导入的是less文件，可以省略后缀名

less语法导出css文件

控制导出的css文件位置两个方法：

• ①配置easyless插件，实现所有less有相同的导出路径
  设置方法，在vscode里搜索Easy LESS，编辑setting.json
  
  添加代码：（第二个双引号表示导出的目标路径）
  
• ②使用代码单独设置导出路径：(less文件第一行添加如下代码，./abc/ 代表想要导出的路径。还可以接具体文件名.css;也可以多个导出路径)
  

less文件禁止导出

在less文件第一行添加：

5、解决方案二：vw/vh

本身是一个相对的长度单位，是相对视口的尺寸。
vw：viewport width；1vw = 1/100视口宽度
vh: viewport height；1vh = 1/100视口高度

/*设置样式时使用vw或vh，一般情况下不混用*/
.box {
    width: 50vw;
    height: 30vw;
    background-color: pink;
}
/*或者*/
.box {
    width: 50vh;
    height: 30vh;
    background-color: pink;
}