阅读 1167

移动端响应式布局-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文件

  <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="style.css">
复制代码

Less

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

less用法

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

1. less变量

变量没有固定值 用法为

@变量名:值;
复制代码

变量命名规范:

  1. 必须有@为前缀
  2. 不能包含特殊字符
  3. 不能以数字开头
  4. 大小写敏感
@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;
}
复制代码

注意

  1. 运算符中间左右必须有个空格隔开1px + 5
  2. 两个数参与运算 如果只有一个数有单位,最后的结果以这个单位为准
  3. 如果两个数参与运算且都有不同的单位,最后的结果以第一个数的单位为准

5.less导入

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

@import "common";
复制代码

Rem布局适配方案

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

元素大小取值方法

  1. 最后的公式:页面元素的rem值 = 页面元素值(px)/(屏幕宽度/划分的份数)
  2. 屏幕宽度/划分的份数就是html font-size的大小
  3. 或者:页面元的rem值=页面元素值 / html font-size字体大小

rem最终适配方案

  1. 首先选一套标准尺寸750为准
  2. 我们用屏幕尺寸除以我们划分的分数 得到了html里面的内文字大小 但是我们知道不同屏幕下得到的文字大小是不一样的
  3. 页面元素的rem值 = 页面元素在750像素下的px值 / html里面的文字大小
文章分类
前端
文章标签