移动web 移动适配和less语法
1. 移动适配
1.1. 什么是移动适配
背景：当屏幕的宽度发生什么变化时，页面元素的尺寸由于设置了px为固定尺寸，会不动，出现多的间距
解决：屏幕的宽高发生变化时，页面元素的尺寸（宽度和高度）随之变化，达到自适应的效果，这样可以更好地达到适配效果，用户体验更好，就需要我们通过某种方法来实现移动适配
-
用百分比布局或者flex完成整体元素的排列布局 -
配合rem或者vw/wh设置元素的尺寸（宽高）最终适配
px是一个绝对单位 pt是一个相对单位 rem、vw、vh也是相对单位
1.2. rem
rem是一个相对单位（根字号大小） 全称 font size of the root element,中文名称根字号，rem单位是相对于html标签的字号
计算结果：1rem=1html字号大小
使用rem优势：父元素的字号大小不一致，但整个页面只有一个html标签，能够很好地控制整个页面的元素大小
但是设置了rem之后不同的屏幕宽度，html字号大小固定未变，box的宽度仍然未变
1.2.1 媒体查询
手机屏幕大小不同，分辨率不同，使用媒体查询media query设置差异化css样式，即不同的屏幕宽度设置不同的html根字号大小
@media（视口/屏幕宽度）{
选择器{
css属性
}
}
@media（width:375px）{
html{
font-size:37.5px;
}
}
css中使用媒体查询，根据不同的视口宽度，设置不同的根字号，就完成了适配 ，设备宽度大，元素尺寸大；设备宽度小，元素尺寸小
注意事项：
-
目前rem布局方案中，将网页均分成10份，html标签的字号为视口宽度的10分之一，比如375宽度，html根字号大小就是37.5px -
在电脑桌面右键点击在显示设置中，屏幕的分辨率要改成100%才会有适配效果
1.2.2. px转换成rem
rem单位尺寸计算步骤：
-
确定设计稿对应的设备的html标签字号
查看设计稿宽度-> 确定参考设备宽度（视口宽度）-> 确定基准根字号（视口宽度的1/10）
-
rem单位尺寸
rem单位的尺寸=px单位数值/基准根字号
/* 媒体查询 */
@media (width:375px) {
html {
font-size: 37.5px;
}
}
.box {
/* 68px*68px转换成rem尺寸 */
/* 68/37.5=1.8133333 */
width: 1.8133em;
height: 1.8133em;
background-color: pink;
}
平时都是使用less或者sass语法帮忙计算 一般我们拿到的设计稿的宽度就是参考设备宽度（视口宽度），通常是二倍图，例如iphone678的尺寸750ox，我们需要把视口宽度定为375px，此时1rem=37.5px
1.2.3. flexible.js
使用flexible.js配合rem实现在不同宽度的设备中，网页元素尺寸等比例缩放的效果 这是开发中提倡的一种方式
flexible.js是淘宝开发出来的一个专门用来适配移动端的js库
核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size，去github下载就可以，引入后就不需要写这么多的媒体查询了js文件会自动检测当前html根字号的大小
<body>
<div class="box"></div>
<script src="./06-素材/js/flexible.js"></script>
</body>
该js库可以检测视口宽度自动修改html的文字大小为当前屏幕的十分之一，例如加了flexible之后，屏幕为375px的屏幕的html文字大小为37.5px
用vue框架的时候还是写px就可以了，打包工具会自动帮我们转换成rem但是底层原理必须了解 引入之后只是知道到了不同屏幕宽度的1rem=多少px值，拿到设计稿375宽度之后，还需要定义一个值如37.5 通过less计算得到rem值 有一个基准的设计稿，就是iphone678的375px用来算出各长度的rem值
1.3. vw/vh
能够使用vw单位设置网页元素的尺寸，不需要去引入flexible.js文件，原理同rem一样，视口宽度等于屏幕尺寸
-
vw viewport width 1vw=1/100视口宽度 -
vh viewport height 1vh=1/100视口高度
实际开发中，vw和vh不可能一起混用，可能会出现盒子变形的结果 屏幕越大，宽度越高，1vw代表的px数越大
1.3.1 vw、vh适配原理
1vw等于视口宽度的1/100 以屏幕宽度375px为例, 使用步骤：
-
查看设计稿宽度-> 确定参考设备宽度（视口宽度）-> 确定vw尺寸（1/100视口宽度） -
vw单位的尺寸=px数值/（1/100视口宽度）由less语法帮我们计算
1.4. rem和vw、vh的区别
-
rem市场比较常见： -
需要不断修改html文字的大小 -
需要媒体查询media query -
需要flexible.js --> -
vw/vh是未来的趋势 -
省去各种判断和修改 -
比较有代表性的是b站目前使用的是vw适配
2. Less语法
背景：前端人员在工作中很难写出组织良好且易于维护的 CSS 代码，Less它在 CSS 的语法基础之上，引入了变量、Mixin（混入）、运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本
解决：使用less语法快速编译生成css代码
Less是一门预处理语言，文件后缀是.less，扩充了CSS语言，使CSS具备一定的逻辑性、计算能力，常见的预处理器还有sass、stylus 注意：浏览器不识别less代码。目前阶段，网页仍然需要引入对应的css文件，前提是vscode安装Easy LESS插件
html是一门标记语言，css是一种层叠样式表 新建less文件文件后保存自动生成css文件
2.1. less注释
less中的注释
| 内容 | 快捷键 | 显示内容 | 备注 |
|---|---|---|---|
| 单行注释 | ctrl+/ | //注释内容 | 不会同步到css文件中 |
| 多行注释 | shift alt A | /* 注释内容 */ | 会生成到css文件中 |
2.2. less计算
.box {
// 加法
width: 100px+100;
// 除法运算，直接写/无法生效，加上小括号或者. 原因是less版本升级所导致
// height: 100px/2;
// 这个.会引起报错 推荐使用括号
// height: 100px ./ 2;
height: (200px / 5);
// 单位转换的时候 出现多个单位 计算以第一个单位为准
height: (100px/20rem);
// 乘法不用括号或.
margin: 20px*2;
padding: 100px-20px;
border: 1px+2*3 solid red;
}
2.3. less嵌套
less语法能帮助我们自动生成后代选择器，语法如下：
父级选择器{
父级样式
.子级选择器{
子级样式
}
}
.father {
width: 200px;
height: 200px;
background-color: pink;
.son {
width: 100px;
height: 100px;
background-color: yellowgreen;
}
// &不生成后代选择器，表示当前选择器，通常配合伪类或者伪元素使用
// 伪类
&:hover .son {
background-color: orange;
}
// 伪元素
&::after {
content: '123';
}
// 结构伪类
ul {
li:nth-child(1) {
font-size: 12px;
}
}
}
生层css文件如下
.father {
width: 200px;
height: 200px;
background-color: pink;
}
.father .son {
width: 100px;
height: 100px;
background-color: yellowgreen;
}
.father:hover .son {
background-color: orange;
}
.father::after {
content: '123';
}
.father ul li:nth-child(1) {
font-size: 12px;
}
2.4. less变量
网页中的文字颜色基本都是统一的，如果网站改版，变换文字颜色如何修改
-
逐一修改属性值，太过繁琐 -
把颜色提前存储到一个容器，设置属性值为这个容器名
解决：设置一个变量，变量是存储数据的容器，方便使用和修改
语法：定义变量 @变量名:值；
使用变量 css属性:@变量名；
2.5. less导入
开发网站中，如何引入公共样式 base.less common.less，css 用link标签，Less 用import导入
好处：直接把base和common里的文件导入import到index.less中，只需要引入index.css即可，减少link的标签数量
语法：@import '文件路径'；或者@import url('文件路径');
less文件可以省略.less后缀名
@import './01-体验less.less';
// 括号里面加不加''都可以
@import url('./02-less嵌套.less');
2.6. 导出
不设置，less文件保存后自动生成css文件到当前目录的文件夹中，文件夹名与less文件夹名相同
2.6.1 导出方法一
配置Easy LESS插件中的setting.json文件，实现所有less有相同的导出路径"less.compile":{"../css/"}
注意：双引号不能掉，路径最后面的/不能掉，json最后一行不用逗号
可以实现把css文件生成到和less文件夹同级的css文件夹中，前提是已经当前less文件在已经新建好的less文件夹中，css文件夹如果未新建，系统会自动新建
2.6.2. 导出方法二
// out: ../测试导出到指定文件夹/测试.css控制当前文件导出位置
注意事项：导出必须写在第一行 前面的两个//别忘了，注意文件夹名称后面添加一个斜杠，习惯冒号后面加一个空格不加也可以 结尾不加分号
这个路径可以帮助新建文件夹 写了名字没有文件夹会自动新建一个
-
out: ./ 表示当前文件夹下 -
out: ../css/ 表示上级文件夹的css文件夹里面 -
out：../My/common 表示上级文件夹的css文件夹里面新建一个common.css文件
注意一定是less的第一行添加，不然无效
2.6.3. 禁止导出
// out:false在第一行加上这行代码
注意点：英文冒号，结尾没有分号，保存后不会生成css文件，用于已经用import导入到主less文件中的less文件，比如移动端的base.less和normalize,less文件