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 | 带屏幕的设备 |
打印预览 | 打印预览模式 | |
阅读器 | 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;
}