CSS移动端布局

CSS移动端布局

一.媒体查询 + rem单位

em:相对元素本身大小
rem:相对根节点大小

【1】使用媒体查询来更改根节点 字体大小
【2】页面布局单位使用rem

缺点：不能精确每一个设备尺寸

二.vm单位 + rem单位

vw:viewpoint width -设备视窗宽度
1w = 视窗宽度1%

vh:viewpoint height - 设备视窗高度
1h = 视窗高度1%

【1】根节点字体大小使用vm单位，当视窗宽度发生变化，那么根节点字体大小也跟着改变
【2】页面布局单位使用rem，根节点字体大小也跟着改变,rem值也跟着改变

（1）设计图为640px - - dpr ：2 - - 对应设备为320px
1vw = 3.2px
100vw = 320px
100px = 31.25vw
逻辑像素 = 物理像素 / dpr / 100rem
逻辑像素 = 320px / 2 / 100rem = 1.6rem

（2）设计图为750px - - dpr ：2 - - 对应设备为375px
1vw = 3.75px
100vw = 375px
100px = 26.67vw
逻辑像素 = 物理像素 / dpr / 100rem
逻辑像素 = 375px / 2 / 100rem = 1.875rem

（3）设计图为1080px - - dpr ：3 - - 对应设备为360px
1vw = 3.6px
100vw = 360px
100px = 27.78vw
逻辑像素 = 物理像素 / dpr / 100rem
逻辑像素 = 360px / 3 / 100rem = 1.2rem

三.rem.js + rem 单位

【1】用script标签引入rem.js
【2】在rem.js中 18 行改为设计图宽度
【3】vscode扩张安装cssrem插件
【4】文件 - 首选项 - 搜索cssrem，把root fontsize的值改为设计图宽度 除以10 的值，重启编辑器
【5】 在css中逻辑像素 = 设计图量出来的值-转换为 rem 单位

四.使用sass + vw

【1】.在css文件夹里创建sass文件
【2】.sass文件里书写函数：

 @function vw( $ px ){
          @return( $ px  /  设计图宽度）*100vw;
  }

【3】.在sass文件里书写sass语法
【4】.有数字的地方就用vw(设计图量出来的值) - 函数括号里的数值没有单位：eg:height:vw(100);

html中使用sass实现布局
1.vscode 安装 easy sass插件
2.在css文件夹里创建sass文件 （后缀名为sass 或 scss）
3.在sass文件里书写sass语法（嵌套）
4.在html引入- 用Link标签引入css文件（自动生成）

sass为：css的扩展功能
（1）嵌套规则
（2）父选择器（&）
（3）属性嵌套
（4）变量 -以$ 开头
- 将局部变量转换为全局变量可以加 ！global声明
（5）函数指令