web前端基础——媒体查询

1 、媒体查询介绍

能够根据设备宽度的变化，设置差异化的样式

媒体特性常用写法：
1.max-width
2. min-width

样例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 视口宽度小于等于768px， 网页背景色是粉色 */
        @media (max-width: 768px) {
            body {
                background-color: pink;
            }
        }
        /* 视口宽度大于等于1200px， 网页背景色是skyblue */
        @media (min-width: 1200px) {
            body {
                background-color: skyblue;
            }
        }
    </style>
</head>
<body>
</body>
</html>

2 、书写顺序

因为CSS属性有层叠性的特性，所以在书写媒体查询的代码时，应注意书写顺序：

• mini-width（从小到大书写）
• max-width（从大到小书写）

要保证后写的属性可以覆盖掉前面的属性

3、媒体查询完整代码

上面例子是简洁写法

@media (媒体特性){
	选择器{
		样式
	}
}

完整写法

@media 关键词  媒体类型 and(媒体特性){
	css样式代码
}

关键词：and only not

媒体类型：用来区分设备类型，比如屏幕设备，打印机设备等

类型名称	值	描述
屏幕	screen	带屏幕的设备
打印预览	print	打印预览模式
阅读器	speech	屏幕阅读模式
不区分类型	all	默认值，包括以上三种情形

媒体特性：主要用来表述媒体类型的具体特征，比如当前屏幕的宽高、分辨率等

特性名称	属性	值
视口的宽和高	width、height	数值
视口最大宽或高	max-width、max-height	数值
视口最小宽或高	min-width、min-height	数值
屏幕方向	orientation	protrait:竖屏，landscape:横屏

4、 媒体查询，link写法

样例代码;注意书写顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 视口宽度 >= 992px，网页背景色为粉色 -->
    <!-- 视口宽度 >= 1200px，网页背景色为绿色 -->
    <link rel="stylesheet" href="./one.css" media="(min-width: 992px)">
    <link rel="stylesheet" href="./two.css" media="(min-width: 1200px)">
</head>
<body>
    
</body>
</html>

one.css

body {
    background-color: pink;
}

tow.css

body {
    background-color: green;
}