移动web第五天-移动适配-less-媒体查询-rem适配

97 阅读1分钟

一.rem移动适配

1.rem单位

Ø 相对单位

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

Ø 1rem = 1HTML字号大小

2.视口

image.png

3.rem适配原理

实现在不同宽度的设备中,网页元素尺寸等比缩放效果

4.flexible

使用flexible js配合rem实现在不同宽度的设备中,网页元素尺寸等比缩放效果

5.在body底部添加路径

image.png

二.Less语法

1.嵌套

image.png

注意:&不生成后代选择器,表示当前选择器,通常配合伪类或伪元素使用

image.png

2.Less变量设置属性值

把颜色提前存储到一个容器,设置属性值为这个容器名

image.png

Less导入写法引用其他Less文件

image.png 保存后导入的代码文件都在一个css里

导出,生成css并放在css文件夹中

image.png