移动端的适配
一、rem 目前大多数再用的解决方案
1、rem是网页元素的尺寸单位是相对单位(可以进行等比缩放)
2、px时间绝对单位,要实现适配就要用百分比,但是当高度固定的时候就会崩溃
3、用 script 引入flexible.js 文件 自动适配大部分分辨率 但是还是需要在固定一个分辨率下计算 px 转rem 的数值
二、less (是一门css属性预处理器Less是一个CSS预处理器, Less文件后缀是.less)
使用语法
注释:
l 单行注释
语法:// 注释内容
快捷键:ctrl + /
l 块注释
语法:/* 注释内容 */
快捷键: shift + alt + A
单位转换
运算:
加、减、乘直接书写计算表达式
除法需要添加 小括号 或 .
注意:
Ø 表达式存在多个单位以第一个单位为准
Less嵌套写法生成后代选择器
.+类名{
.+类名 1
}
表示类名1 镶嵌在类名里
&:配合hover使用
&::配合为伪元素使用
Less变量设置属性值
可以提前把所需要的样式放在这个容器里,后续用个属性值时直接@变量名更改样式。
语法:
定义变量:@变量名: 值;
使用变量:CSS属性:@变量名;
Less导入写法引用其他Less文件
语法:
导入: @import “文件路径”;
vw 、vh布局
作用:实现在不同宽度的设备中,网页元素尺寸等比缩放效果
vw单位尺寸
确定设计稿对应的vw尺寸 (1/100视口宽度)查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 (1/100 视口宽度)
vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )