2.1 媒体查询基础
媒体查询 (media queries) 是创建响应式网站的关键工具之一。可以用来为不同的设备和屏幕尺寸自适应样式，确保最佳显示和使用方便。下面我们会讨论媒体查询的基础用法、语法以及为不同屏幕自适应样式的例子。
媒体查询 使用 @media 规则，可以在满足特定条件时应用特定样式。条件可以包括屏幕尺寸、分辨率、方向和其他参数。
语法：
@media media-type and (media-feature) {
/* 样式 */
}
其中：
media-type: 应用样式的媒体类型，最常用的是 screenmedia-feature: 媒体特征，比如宽度、高度、方向等
例子：
- 在这个例子中，如果屏幕宽度不超过 768 像素，页面背景会变成浅蓝色。
CSS
@media screen and (max-width: 768px) {
body {
background-color: lightblue;
}
}
2.2 媒体查询类型
1. 根据宽度和高度的查询
这些媒体查询允许根据视窗的宽度和高度来更改样式。
例子：
CSS
/* 如果屏幕宽度小于或等于768px，应用样式 */
@media (max-width: 768px) {
.container {
padding: 10px;
}
}
/* 如果屏幕高度大于800px，应用样式 */
@media (min-height: 800px) {
.header {
height: 150px;
}
}
2. 方向 (orientation)
屏幕方向查询允许根据设备是处于竖屏 (portrait) 还是横屏 (landscape) 来自适应样式。
例子：
CSS
/* 为竖屏方向应用样式 */
@media (orientation: portrait) {
.sidebar {
display: none;
}
}
/* 为横屏方向应用样式 */
@media (orientation: landscape) {
.sidebar {
display: block;
}
}
3. 像素密度 (resolution)
像素密度查询允许为不同像素密度的设备自适应样式，比如 Retina 屏幕。
例子：
CSS
/* 为像素密度为2x及以上的屏幕应用样式 */
@media (min-resolution: 2dppx) {
.high-res-image {
background-image: url('high-res-image.png');
}
}
/* 为像素密度小于2x的屏幕应用样式 */
@media (max-resolution: 1.99dppx) {
.high-res-image {
background-image: url('standard-res-image.png');
}
}
2.3 媒体查询的组合
可以通过逻辑运算符 and, not, 和 only 来组合媒体查询。
例子
使用 and 运算符：
CSS
/* 为屏幕宽度在600px到1200px之间的设备应用样式 */
@media (min-width: 600px) and (max-width: 1200px) {
.main-content {
margin: 0 auto;
width: 80%;
}
}
使用 not 运算符：
CSS
/* 为所有设备应用样式，除了屏幕宽度小于600px的设备 */
@media not all and (max-width: 600px) {
.footer {
display: block;
}
}
使用 only 运算符：
CSS
/* 只为屏幕设备应用样式 */
@media only screen and (max-width: 768px) {
.menu {
display: none;
}
}
GO TO FULL VERSION