html移动端响应式布局,移动端响应式布局-Rem布局+Less基础

rem

rem是一个尺寸单位 它的意思是相对于根元素字体大小的多少倍

如

html {

font-size : 10px

}

#text{

width : 10rem;

height : 12rem;

}

复制代码

那么这里的text的width为10*10=100px height为10*12=120px

媒体查询

使用媒体查询可以针对不同媒体类型定义不同样式

@media可以针对不同的屏幕尺寸设置不同样式(核心)

重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

媒体查询的语法

@media mediatype and|not|only (media feature){

CSS code;

}

复制代码

用@media开头

mediatype媒体类型 媒体类型包括 all：用于所有设备、print：用于打印机和打印预览、scree：用于电脑屏幕、手机、平板

关键字 and、not、only

media feature媒体特性 必须用小括号包含 媒体特性包括 width：定义输出设备中页面可见区域的宽度、min-width：最小可见区域宽度、max-width：最大可见区域宽度

例如这句代码的意思就是

@media screen and (min-width: 800px) and (max-width: 989px){}

复制代码

在屏幕上 并且 宽度在800-990像素时 所要设置的样式

引入资源

当不同尺寸的布局有较大变动的时候，可以针对不同的媒体使用不同的styleheets。原理是直接在link中判断设备的尺寸，然后引用不同的css文件

复制代码

Less

Less是css的扩展语言，在css语法基础上，引入了变量，mixin(混入)，运算以及函数等功能

less用法

创建后缀名为less的文件 在该文件中编译

1. less变量

变量没有固定值 用法为

@变量名:值;

复制代码

变量命名规范：

必须有@为前缀

不能包含特殊字符

不能以数字开头

大小写敏感

@color:red;

body{

background-color: @color;

}

复制代码

2.less编译

使用VScode的 Easy LESS插件。重启VScode后，以后每次写完less文件后保存都会出现对应的css文件

3.less嵌套

css中

.header a{}

复制代码

在less中可以写成

.header{

a{}

}

复制代码

伪类的写法 如要在a后面加:hover

.header{

a{

&:hover{}

}

}

复制代码

如果有伪类、交集选择器、伪元素选择器 内层选择器的前面需要加&符号 不然会认为是子代选择器

4.less运算

@width: 10px + 5;

@height: 10px / 5;

div{

width : (@width * 5);

height: 82 /50rem;

}

复制代码

注意

运算符中间左右必须有个空格隔开1px + 5

两个数参与运算 如果只有一个数有单位，最后的结果以这个单位为准

如果两个数参与运算且都有不同的单位，最后的结果以第一个数的单位为准

5.less导入

如果在新的less文件中引入之前的less文件用法 如导入common.less

@import "common";

复制代码

Rem布局适配方案

使用媒体查询根据不同设备按比例设置html字体大小，然后页面元素使用rem做尺寸单位，当html字体大小改变，元素尺寸也会发生变化，从而达到等比例缩放的适配。

元素大小取值方法

最后的公式：页面元素的rem值 = 页面元素值(px)/(屏幕宽度/划分的份数)

屏幕宽度/划分的份数就是html font-size的大小

或者：页面元的rem值=页面元素值 / html font-size字体大小

rem最终适配方案

首先选一套标准尺寸750为准

我们用屏幕尺寸除以我们划分的分数 得到了html里面的内文字大小 但是我们知道不同屏幕下得到的文字大小是不一样的

页面元素的rem值 = 页面元素在750像素下的px值 / html里面的文字大小