媒体查询与less

屏幕分辨率

• 屏幕分辨率：纵横向上的像素点数，单位是px

• pc分辨率

  1. 1920*1080

  2. 1366*768

• 缩放150%

  1. 1920/150%

  2. 1080/150%

视口

• 手机屏幕尺寸不同，网页宽度均为100%

• 网页的宽度和逻辑分辨率尺寸相同

• 视口：显示HTML网页的区域，用来约束HTML尺寸

<meta name="viewport" content="width=device-width,initial-scale=1.0">

• width=device-width:视口宽度=设备宽度

• initial-scale=1.0:缩放1倍（不缩放）

二倍图

概念：设计稿里面每个元素的尺寸的倍数

作用：防止图片在高分辨率屏幕下模糊失真

• 现阶段设计稿参考iphone6/7/8，设备宽度375px产出设计稿。

• 二倍图设计稿尺寸：750px。

适配方案

• 宽度适配：宽度自适应

  1. 百分比布局

  2. Flex布局

• 等比适配：宽高等比缩放

  1. rem

     • rem单位，是相对单位

     • rem单位是相对于HTML标签的字号计算结果

     • 1rem=1HTML字号大小

     • 目前rem布局方案中，将网页等分成10份，HTML标签的字号为视口宽度的1/10

  2. vw

rem-flexible.js

• flexible.js是手淘开发出的一个用来适配移动端的js库。

• 核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。

Less-简介

• Less是一个CSS预处理器，Less文件后缀是.less。扩充了CSS语言，使CSS具备一定的逻辑性、计算能力

• 注意：浏览器不识到Less代码，目前阶段，网页要引入对应的CSS文件

• VSCode插件：Easy LESS,保存less文件后自动生成对应的CSS文件

less-运算

运算：

• 加、减、乘直接书写计算表达式

• 除法需要添加小括号或.

less-变量

概念：容器，存储数据

作用：存储数据，方便使用和修改

语法：

• 定义变量：@变量名：数据；

• 使用变量：CSS属性：@变量名；

less-导入

作用：导入less公共样式文件

语法：导入：@import “文件路径”；

提示：如果是less文件可以省略后缀

@import "./base.less";
@import "./common";

less-导出

写法：在less文件的第一行添加//out:存储URL

提示：文件夹名称后面添加/