CSS3媒体查询（Media Queries）允许你根据设备的特性（如屏幕尺寸、分辨率、设备类型等）来应用不同的CSS样式。这使得你可以创建响应式设计的网页，能够适应不同设备的显示需求。
媒体查询的基本语法如下：
@media not|only mediatype and (expressions) {
CSS-Code;
}
@media：表示这是一个媒体查询。not：可选，表示当条件不满足时应用样式。only：可选，表示只有当条件满足时才应用样式。这可以防止旧版浏览器应用这些样式。mediatype：媒体类型，如screen（屏幕）、print（打印）等。(expressions)：一个或多个条件表达式，用于定义媒体查询的触发条件。以下是一些常见的媒体查询示例：
/* 当屏幕宽度小于等于480px时应用 */
@media screen and (max-width: 480px) {
body {
background-color: lightblue;
}
}
/* 当屏幕宽度在481px到768px之间时应用 */
@media screen and (min-width: 481px) and (max-width: 768px) {
body {
background-color: lightgreen;
}
}
/* 当设备像素比大于等于2时应用 */
@media screen and (min-resolution: 2dppx) {
img {
content: url('high-res-image.png');
}
}
/* 当设备为打印机时应用 */
@media print {
body {
color: black;
}
}
你可以根据实际需求组合多个条件表达式，以实现更复杂的响应式设计。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
