数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何使用CSS媒体查询实现常见设备断点？
媒体查询用于设置网页的响应式设计。它允许用户根据不同的屏幕尺寸设置不同的样式。这些屏幕尺寸主要包括桌面电脑、平板电脑和移动设备。让我们首先设置不同的屏幕尺寸，即设置常见的设备断点。
不同的屏幕尺寸
常见的设备断点是指不同设备及其屏幕尺寸，例如：
手机 − 屏幕宽度小于768像素
平板电脑 − 屏幕宽度大于等于768像素
小型笔记本电脑 − 屏幕宽度大于等于992像素
笔记本电脑和台式电脑 − 屏幕宽度大于等于1200像素
最大宽度为600像素的屏幕
当屏幕尺寸小于600像素时，使用`background-color`属性设置以下背景颜色：
@media only screen and (max-width: 600px) {
body {
background: blue;
}
}
最小宽度为600像素的屏幕
当屏幕尺寸大于600像素但小于768像素时，使用`background-color`属性设置以下背景颜色：
@media only screen and (min-width: 600px) {
body {
background: green;
}
}
最小宽度为768像素的屏幕
当屏幕尺寸大于768像素但小于992像素时，使用`background-color`属性设置以下背景颜色：
@media only screen and (min-width: 768px) {
body {
background: orange;
}
}
最大宽度为992像素的屏幕
当屏幕尺寸大于992像素但小于1200像素时，使用`background-color`属性设置以下背景颜色：
@media only screen and (min-width: 992px) {
body {
background: red;
}
}
最大宽度为1200像素的屏幕
当屏幕尺寸大于1200像素时，使用`background-color`属性设置以下背景颜色：
@media only screen and (min-width: 1200px) {
body {
background: cyan;
}
}
示例
要使用CSS中的媒体查询实现常见的设备断点，代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
color: white;
}
@media only screen and (max-width: 600px) {
body {
background: blue;
}
}
@media only screen and (min-width: 600px) {
body {
background: green;
}
}
@media only screen and (min-width: 768px) {
body {
background: orange;
}
}
@media only screen and (min-width: 992px) {
body {
background: red;
}
}
@media only screen and (min-width: 1200px) {
body {
background: cyan;
}
}
</style>
</head>
<body>
<h1>Typical Breakpoints Example</h1>
<h2>Resize the screen to see background color change on different breakpoints</h2>
</body>
</html>
更新于：2023-12-21
浏览量：103
广告