移动Web开发——rem适配布局（二）_移动开发布局rem布局案例2-CSDN博客

本文链接：https://blog.csdn.net/zhr_beyond/article/details/114174367

rem适配布局（二）

学习目标

（1）能够使用rem单位

（2）能够使用媒体查询的基本语法

（3）能够使用Less的基本语法

（4）能够使用Less中的嵌套

（5）能够使用Less中的运算

（6）能够使用2种rem适配方案

（7）能够独立完成苏宁移动端首页

1.媒体查询

（1）什么是媒体查询

媒体查询（Media Query）是CSS 3的新语法

① 使用 @media 查询，可以针对不同的媒体类型定义不同的样式

② @media 可以针对不同的屏幕尺寸设置不同的样式

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

语法规范

// 语法规范
@media mediatype and | not | only (media feature){
	CSS-Code;
}

① 用@media开头注意@符号

② mediatype 媒体类型

③ 关键字 and not only

④ media feature 媒体特性必须有小括号包含

（2）查询类型

将不同的终端设备划分成不同的类型，称为媒体类型

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

（3）语法规范

关键字

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

① and : 可以将多个媒体特性连接到一起，相当于“且”的意思

② not : 排除某个媒体类型，相当于“非”的意思，可以省略

③ only : 指定某个特定的媒体类型，可以省略

（4）媒体特性

每种媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特点设置不同的展示风格

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

例1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 在我们的屏幕上并且最大宽度是800像素,设置样式 */
			@media screen and (max-width: 800px) {
				body{
					background-color: pink;
				}
			}
			@media screen and (max-width: 500px) {
				body{
					background-color: purple;
				}
			}
		</style>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述