移动web开发：rem+less+媒体查询

最新推荐文章于 2022-11-14 08:41:01 发布

soEzLife

最新推荐文章于 2022-11-14 08:41:01 发布

阅读量170

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_41591033/article/details/103236975

版权

前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1. rem基础

rem单位

rem是一个相对单位，类似于em，不同的是em的基准是父元素字体大小，rem的基准是html元素的字体大小
使用rem做单位的元素的实际大小 = rem值 * html元素的字体大小

		<style type="text/css">
			html {
				font-size: 12px;
			}
			
			div {
				width: 2rem; /* 实际大小: 12 * 2 = 24px */
				height: 3rem; /* 实际大小: 12 * 3 = 36px */
				background-color: black;
			}
		</style>
	</head>
	<body>
		<div>
		</div>
	</body>

rem的优点是可以通过修改html里面的字体大小来改变页面中元素的大小

2. 媒体查询

2.1 什么是媒体查询

媒体查询是CSS3新语法

使用媒体查询，可以针对不同的媒体类型定义不同的样式
使用媒体查询，可以针对不同的屏幕尺寸设置不同的样式
重置浏览器大小的过程中，页面会根据浏览器的宽度和高度重新渲染页面

2.2 语法规范

@media mediatype and|not|only (media feature) {
	CSS-Code;
}

使用@media开头
mediatype 媒体类型
关键字and not only
meidia feature 媒体特性用小括号包裹

2.2.1 mediatype查询类型

媒体类型表示不同终端的类型

值	解释说明
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等

2.2.2 关键字

关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件

and：可以将多个媒体特性连接到一起，可理解为“与”
not：排除某个媒体类型，可理解为“非”
only：制定某个特定的媒体类型

2.2.3 媒体特性

最用的媒体特性

值	解释说明
max-width	定义输出设备中页面最大可见区域宽度
min-width	定义输出设备中页面最小可见区域宽度

@media screen and (max-width: 750px) {
	body {
		background-color: black;
	}
}

以上代码的意思为，在媒体为screen类型且最大宽度为750像素（屏幕宽度小于等于750px）时，将body的背景颜色设置为黑色。

2.3 引入

我们可以直接在link中判断设备的尺寸，然后引用不同的css文件

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

    <link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
    <link rel="stylesheet" href="style750.css" media="screen and (min-width: 750px)">

3. Less基础

3.1 维护css的弊端

CSS是一门非程序式语言，没有变量、函数、作用域等概念

css需要书写大量看似没有逻辑的代码，代码冗余度较高
不方便维护，不利于复用
css没有计算能力

3.2 Less介绍

Less是一门css扩展语言，也称为css预处理器。
它并没有减少css的功能，而是在现有的css语法上，为css引入了变量、运算、函数等功能。
Less是一门css预处理语言，它扩展了css的动态特性

3.3 Less变量

@变量名: 值

变量命名规范

以@为前缀
不包含特殊字符
不以数字开头
大小写敏感

@color: black;
body {
	background-color: @color;
}

div {
	background-color: @color;
}

3.4 Less嵌套

传统CSS

#header {
	background-color: black;
}
#header .logo{
	width: 300px;
}

Less嵌套

#header {
	background-color: black;
	.logo {
		width: 300px;
	}
}

若遇见伪类、伪元素
传统CSS

a {
	color:red;
}
a:hover {
	color:black;
}

Less

a {
	color:red;
	&:hover {
		color:black;
	}
}

内层选择器的前面没有&符号，则会被解析为父选择器的后代，
若有&符号，会被解析为父元素自身或父元素的伪类

3.5 Less运算

任何数字、颜色或者变量都可以参与运算

/*less中代码*/
@width: 10px
div {
	width: @width + 5;
}

/*生成的css*/
div {
	width: 15px;
}

注意:
1.	运算符左右两侧用空格隔开
2.	两个数参与运算，如果只有一个数有单位，则结果以该单位为准
3.	两个数参与运算，如果两个数都有单位，则结果以运算符左侧单位为准

4. 适配方案

三部曲

按照设计稿确认标准尺寸(假设为750px)
将屏幕划分为若干等份（15、20你自己定，假设定为15份），用媒体查询表示不同屏幕宽度下的html字体大小。（屏幕宽度 / 份数 = 当前宽度下html的字体大小）不同屏幕的宽度不同，导致不同屏幕下html的字体大小不同，同时影响rem
根据设计稿的元素尺寸来计算rem值元素的rem值 = 元素在设计稿（750px）下像素值 / html里的文字大小（750px / 份数）,将元素的尺寸都用rem值表示。