【Web前端学习之路】web进阶（移动web） 黑马课程笔记03

1、移动适配

使网页元素大小随着页面大小的改变而改变，要达到移动适配，目前多数企业在用的解决方案是rem方案，未来的解决方案是vw/vh方案。

2、rem解决方案

• rem单位：是相对单位，相对于HTML标签（网页根标签）字号的计算结果，1rem = 1HTML字号
• 媒体查询（移动适配的原理）：设备大小不同，如何设置不同的HTML标签字号？利用媒体查询，可以检测视口的宽度与设定值是否匹配，若匹配从而编写相适应的根标签字号大小，完成差异化CSS样式。

       目前rem布局方案中，HTML标签的字号一般取值为视口宽度的1/10

• 使用flexible.js，该js框架是专门用来适配移动端网页元素尺寸问题，其核心原理即上述根据不同视口宽度给网页中的html根标签设置不同的字号。引入flexible.js后，就不用自己单独写不同的媒体查询。
• less语法：因为设计稿中的单位是px，所以写代码时我们需要完成px单位到rem单位的转换，过程：设计稿中的px除以html根标签中字号大小，得出rem大小，此过程十分繁琐，故引入Less语法。

3、Less语法

Less是一个CSS预处理器，文件后缀是.less。Less其实就是css的简化写法，安装easy less插件后（安装插件需重启VS CODE），编写less文件，会自动生成css代码。

Less扩充了CSS语言，使CSS具备了一定的逻辑性、计算能力。

注意：浏览器并不识别Less代码，目前阶段，网页依然引入的是对应的CSS文件。

• less计算

•  less嵌套

注：&符号不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用

•  less变量（统一修改某样式）

若网页中，文字颜色基本统一，若要改变颜色，可以使用变量的方法

定义：@变量名：值；   使用：CSS属性：@变量名

•  less导入

在当前网页下，引入公共样式的方法是书写Link标签（less文件转化为css文件后），还有一种方法直接在当前网页的less文件中导入其他less文件

@import ‘文件路径名’；         import后面要加空格   如果是导入less文件，可以省略后缀名.less

• less导出

方法一：配置EasyLess插件，实现所有Less有相同的导出路径

设置-》搜索EasyLess-》在setting.json中编辑-》添加代码（json文件中必须都是双引号）

 

 方法二：单独将某一less文件导出

在该less文件的首行写上 //out : 导出路径    （不用加引号）

•  禁止导出

某些less文件是用于导入其他less文件的，不用导出css文件，可以使用禁止导出

在该less文件的首行写上 //out : false