导航分类
CSS3 分页实例 
CSS3 多媒体查询
CSS3 多媒体查询（Media Queries）是响应式设计的核心技术，继承了 CSS2 多媒体类型的全部思想。
它允许你根据设备特性（如屏幕尺寸、分辨率、方向等）设置不同的样式规则，使用语法：
@media media-type and (media-feature) {
/* CSS规则 */
}针对不同屏幕宽度
不同媒体类型(包括显示器、便携设备、电视机等)有不同屏幕宽度，根据屏幕宽度设置不同的样式规则。
/* 移动设备优先 - 默认样式 */
.container {
width: 100%;
padding: 15px;
}
/* 小屏幕（平板，768px及以上） */
@media (min-width: 768px) {
.container {
width: 750px;
padding: 20px;
}
}
/* 中等屏幕（桌面，992px及以上） */
@media (min-width: 992px) {
.container {
width: 970px;
padding: 25px;
}
}
/* 大屏幕（大桌面，1200px及以上） */
@media (min-width: 1200px) {
.container {
width: 1170px;
padding: 30px;
}
}横屏/竖屏检测
当设备进行横屏/竖屏转换时，需要不同的样式规则，以适配设备的正常显示。
/* 竖屏样式 */
@media (orientation: portrait) {
.header {height: 50vh;}
}
/* 横屏样式 */
@media (orientation: landscape) {
.header {height: 30vh;}
}高分辨率设备
针对高分辨率（Retina/HiDPI）设备应用特定的样式规则，比如为高分辨率设备提供更清晰的图像。
.logo {
background-image: url('logo.png');
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.logo {
background-image: url('logo@2x.png');
background-size: contain;
}
}使用组合查询
在复杂条件下，可以使用组合查询，为设备提供特定的样式规则。
/* 仅在横屏且宽度至少为1024px的屏幕上应用 */
@media screen and (orientation: landscape) and (min-width: 1024px) {
.sidebar {
width: 300px;
float: left;
}
}
/* 打印样式优化 */
@media print {
body {
font-size: 12pt;
color: #000;
}
.no-print {display: none;}
}阻止移动设备缩放
使用媒体查询时，同时需要禁用移动端的默认缩放行为，以确保页面布局的稳定性和一致性。
<meta name="viewport" content="width=device-width, initial-scale=1">IE 兼容处理
旧版 Internet Explorer（IE9 以下版本）不支持 CSS3 媒体查询，于是使用 JavaScript 来实现响应式。
<!--[if lt IE 9]>
<script src="respond.js"></script>
<![endif]-->
评论区 0
发表评论
教程介绍
CSS3 是 CSS 技术的版本升级，在 CSS 基础上进行了扩展改进，引入了新的特性和模块。
36
章节
48
阅读
0
评论
反馈提交成功
感谢您的反馈，我们将尽快处理您的反馈