CSS3常用媒体查询2024：前端开发者掌握实用Media Queries技巧完整指南

📊 SEO元描述：2024年最新CSS3常用媒体查询教程，详解屏幕尺寸查询、设备方向查询、分辨率查询、打印样式查询。包含完整实用技巧和最佳实践，适合前端开发者掌握CSS3媒体查询的实际应用方法。

核心关键词：CSS3常用媒体查询2024、屏幕尺寸查询、设备方向查询、分辨率查询、打印样式、Media Queries实用技巧

长尾关键词：CSS3媒体查询实用技巧、屏幕尺寸适配方法、设备方向检测查询、高分辨率屏幕适配、CSS打印样式优化

📚 CSS3常用媒体查询学习目标与核心收获

通过本节CSS3常用媒体查询教程，你将系统性掌握：

✅ 屏幕尺寸查询：掌握最实用的屏幕尺寸适配查询技巧
✅ 设备方向查询：学会处理横屏竖屏切换的布局适配
✅ 分辨率查询：掌握高分辨率屏幕的适配和优化方法
✅ 打印样式查询：学会创建专业的打印优化样式
✅ 用户偏好查询：了解现代浏览器的用户偏好检测技术
✅ 实用查询模式：掌握项目中最常用的媒体查询模式和技巧

🎯 适合人群

前端开发者的媒体查询实战技能提升需求
响应式开发工程师的适配技巧深化学习需求
UI开发专家的多设备优化技术需求
Web开发者的媒体查询最佳实践学习需求

🌟 屏幕尺寸查询：最实用的设备适配技术

屏幕尺寸查询是媒体查询中最常用的技术，通过检测视口宽度和高度来为不同尺寸的设备提供适配的样式。这是响应式设计的核心技术。

屏幕尺寸查询的核心价值

🎯 精确适配：为每种屏幕尺寸提供最适合的布局
🔧 用户体验：确保内容在任何设备上都清晰可读
💡 性能优化：避免不必要的样式计算和渲染
📚 维护性：统一的断点系统便于代码维护
🚀 扩展性：灵活适应新的设备尺寸

💡 最佳实践：使用相对单位（em、rem）而非绝对像素值，更好地适应用户的字体设置

标准屏幕尺寸断点

css

/* 🎉 标准屏幕尺寸断点系统 */

/* 超小屏幕：小手机 (320px - 479px) */
/* 默认样式，无需媒体查询 */
.container {
    width: 100%;
    padding: 10px;
    font-size: 14px;
}

.navigation {
    display: none; /* 隐藏复杂导航 */
}

.mobile-menu {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
}

/* 小屏幕：大手机 (480px - 767px) */
@media (min-width: 480px) {
    .container {
        padding: 15px;
        font-size: 15px;
    }
    
    .content-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
    
    .hero-section {
        height: 250px;
    }
}

/* 中等屏幕：平板竖屏 (768px - 1023px) */
@media (min-width: 768px) {
    .container {
        max-width: 750px;
        margin: 0 auto;
        padding: 20px;
        font-size: 16px;
    }
    
    .mobile-menu {
        display: none;
    }
    
    .navigation {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .content-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    
    .hero-section {
        height: 350px;
    }
    
    .sidebar {
        display: block;
        width: 250px;
        position: sticky;
        top: 20px;
    }
}

/* 大屏幕：平板横屏/小桌面 (1024px - 1199px) */
@media (min-width: 1024px) {
    .container {
        max-width: 970px;
        padding: 30px;
        font-size: 17px;
    }
    
    .content-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 25px;
    }
    
    .hero-section {
        height: 450px;
    }
    
    .main-layout {
        display: grid;
        grid-template-columns: 1fr 300px;
        gap: 40px;
    }
}

/* 超大屏幕：大桌面 (1200px+) */
@media (min-width: 1200px) {
    .container {
        max-width: 1170px;
        padding: 40px;
        font-size: 18px;
    }
    
    .content-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 30px;
    }
    
    .hero-section {
        height: 550px;
    }
    
    .main-layout {
        grid-template-columns: 1fr 350px;
        gap: 50px;
    }
}

/* 4K和超宽屏 (1400px+) */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
        padding: 50px;
    }
    
    .content-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 35px;
    }
    
    .hero-section {
        height: 650px;
    }
}

精确的尺寸范围查询

css

/* 精确的尺寸范围适配 */

/* 仅针对小手机 */
@media (max-width: 479px) {
    .small-phone-only {
        font-size: 13px;
        padding: 8px;
    }
    
    .complex-layout {
        display: none; /* 隐藏复杂布局 */
    }
    
    .simplified-layout {
        display: block;
    }
}

/* 仅针对中等手机 */
@media (min-width: 480px) and (max-width: 767px) {
    .medium-phone-only {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    .two-column-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
}

/* 仅针对平板设备 */
@media (min-width: 768px) and (max-width: 1023px) {
    .tablet-only {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 25px;
    }
    
    .tablet-navigation {
        display: flex;
        justify-content: center;
        padding: 15px 0;
    }
}

/* 仅针对桌面设备 */
@media (min-width: 1024px) {
    .desktop-only {
        display: block;
    }
    
    .hover-effects:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.15);
        transition: all 0.3s ease;
    }
}

高度相关的查询

css

/* 基于视口高度的适配 */

/* 低高度屏幕：横屏手机 */
@media (max-height: 500px) {
    .compact-header {
        height: 40px;
        padding: 5px 15px;
    }
    
    .compact-navigation {
        font-size: 14px;
        padding: 8px 12px;
    }
    
    .full-height-section {
        height: auto; /* 取消全屏高度 */
        min-height: 300px;
    }
}

/* 中等高度屏幕 */
@media (min-height: 600px) and (max-height: 899px) {
    .standard-layout {
        padding: 20px 0;
    }
    
    .hero-section {
        height: 60vh;
        min-height: 400px;
    }
}

/* 高屏幕：大显示器 */
@media (min-height: 900px) {
    .spacious-layout {
        padding: 40px 0;
    }
    
    .hero-section {
        height: 70vh;
        min-height: 600px;
    }
    
    .sticky-sidebar {
        position: sticky;
        top: 50px;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }
}

/* 超高屏幕：4K显示器 */
@media (min-height: 1200px) {
    .ultra-spacious {
        padding: 60px 0;
    }
    
    .hero-section {
        height: 80vh;
        min-height: 800px;
    }
}

📱 设备方向查询：横竖屏适配的完美解决方案

设备方向查询帮助开发者根据设备的横竖屏状态调整布局，特别是在移动设备上提供更好的用户体验。

基础方向查询

css

/* 🎉 基础设备方向适配 */

/* 竖屏样式 */
@media (orientation: portrait) {
    .portrait-layout {
        display: flex;
        flex-direction: column;
    }
    
    .mobile-navigation {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background-color: white;
        border-top: 1px solid #e0e0e0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index: 1000;
    }
    
    .main-content {
        padding-bottom: 80px; /* 为底部导航留空间 */
    }
    
    .hero-image {
        height: 40vh;
        object-fit: cover;
    }
    
    .card-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* 横屏样式 */
@media (orientation: landscape) {
    .landscape-layout {
        display: flex;
        flex-direction: row;
    }
    
    .mobile-navigation {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 200px;
        background-color: white;
        border-right: 1px solid #e0e0e0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 20px 0;
        z-index: 1000;
    }
    
    .main-content {
        margin-left: 220px; /* 为侧边导航留空间 */
        padding-bottom: 20px;
    }
    
    .hero-image {
        height: 60vh;
        object-fit: cover;
    }
    
    .card-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}

结合尺寸的方向查询

css

/* 结合屏幕尺寸的方向查询 */

/* 小屏幕竖屏：手机竖屏 */
@media (max-width: 767px) and (orientation: portrait) {
    .mobile-portrait {
        padding: 15px;
    }
    
    .header {
        height: 60px;
        position: sticky;
        top: 0;
        z-index: 100;
    }
    
    .content-section {
        margin: 20px 0;
    }
    
    .image-gallery {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
}

/* 小屏幕横屏：手机横屏 */
@media (max-width: 767px) and (orientation: landscape) {
    .mobile-landscape {
        padding: 10px 20px;
    }
    
    .header {
        height: 50px;
        position: sticky;
        top: 0;
        z-index: 100;
    }
    
    .content-section {
        margin: 15px 0;
    }
    
    .image-gallery {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
    
    /* 横屏时优化视频播放 */
    .video-container {
        height: 70vh;
    }
}

/* 平板竖屏 */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
    .tablet-portrait {
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 30px;
    }
    
    .sidebar {
        order: 2; /* 侧边栏移到内容下方 */
    }
    
    .main-content {
        order: 1;
    }
}

/* 平板横屏 */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
    .tablet-landscape {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 40px;
        padding: 25px;
    }
    
    .sidebar {
        order: 2;
        position: sticky;
        top: 20px;
        height: fit-content;
    }
    
    .main-content {
        order: 1;
    }
}

特殊方向适配场景

css

/* 特殊场景的方向适配 */

/* 游戏或视频应用的横屏优化 */
@media (orientation: landscape) and (max-height: 500px) {
    .immersive-content {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .controls {
        position: fixed;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 15px;
    }
    
    .header,
    .footer {
        display: none; /* 隐藏非必要元素 */
    }
}

/* 阅读应用的竖屏优化 */
@media (orientation: portrait) and (min-height: 600px) {
    .reading-layout {
        max-width: 600px;
        margin: 0 auto;
        padding: 40px 20px;
        line-height: 1.8;
        font-size: 18px;
    }
    
    .reading-controls {
        position: fixed;
        top: 20px;
        right: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}

/* 表单的方向适配 */
@media (orientation: portrait) {
    .form-layout {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    
    .form-row {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}

@media (orientation: landscape) and (min-width: 768px) {
    .form-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
    
    .form-row {
        display: flex;
        flex-direction: row;
        gap: 15px;
        align-items: center;
    }
    
    .form-row label {
        min-width: 120px;
    }
}

🖥️ 分辨率查询：高清屏幕的完美适配

分辨率查询用于检测设备的像素密度，为高分辨率屏幕（如Retina显示器）提供更清晰的图像和更精细的样式。

基础分辨率适配

css

/* 🎉 基础分辨率查询 */

/* 标准分辨率 (1x) */
.logo {
    background-image: url('logo-1x.png');
    background-size: 200px 50px;
    width: 200px;
    height: 50px;
}

.hero-background {
    background-image: url('hero-1x.jpg');
    background-size: cover;
    background-position: center;
}

/* 高分辨率 (2x) - Retina屏幕 */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi),
       (min-resolution: 2dppx) {
    .logo {
        background-image: url('logo-2x.png');
    }
    
    .hero-background {
        background-image: url('hero-2x.jpg');
    }
    
    /* 高分辨率屏幕的细节优化 */
    .thin-border {
        border-width: 0.5px;
    }
    
    .fine-text {
        font-weight: 300;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* 超高分辨率 (3x) - iPhone Plus等 */
@media (-webkit-min-device-pixel-ratio: 3),
       (min-resolution: 288dpi),
       (min-resolution: 3dppx) {
    .logo {
        background-image: url('logo-3x.png');
    }
    
    .hero-background {
        background-image: url('hero-3x.jpg');
    }
    
    .ultra-fine-details {
        border-width: 0.33px;
        box-shadow: 0 0.33px 2px rgba(0,0,0,0.1);
    }
}

分辨率与尺寸结合查询

css

/* 结合屏幕尺寸的分辨率查询 */

/* 移动设备高分辨率 */
@media (max-width: 767px) and (min-resolution: 2dppx) {
    .mobile-retina-image {
        background-image: url('mobile-hero-2x.jpg');
        background-size: cover;
    }
    
    .mobile-icon {
        background-image: url('mobile-icon-2x.png');
        background-size: 24px 24px;
        width: 24px;
        height: 24px;
    }
}

/* 平板设备高分辨率 */
@media (min-width: 768px) and (max-width: 1023px) and (min-resolution: 2dppx) {
    .tablet-retina-image {
        background-image: url('tablet-hero-2x.jpg');
        background-size: cover;
    }
    
    .tablet-interface {
        font-weight: 400;
        letter-spacing: -0.01em;
    }
}

/* 桌面设备高分辨率 */
@media (min-width: 1024px) and (min-resolution: 2dppx) {
    .desktop-retina-image {
        background-image: url('desktop-hero-2x.jpg');
        background-size: cover;
    }
    
    .desktop-fine-details {
        border: 0.5px solid #e0e0e0;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
}

不同分辨率的图标适配

css

/* 图标的分辨率适配 */
.icon {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
}

.icon-home {
    width: 24px;
    height: 24px;
    background-image: url('icons/home-1x.png');
    background-size: 24px 24px;
}

.icon-search {
    width: 20px;
    height: 20px;
    background-image: url('icons/search-1x.png');
    background-size: 20px 20px;
}

.icon-user {
    width: 32px;
    height: 32px;
    background-image: url('icons/user-1x.png');
    background-size: 32px 32px;
}

/* 2x分辨率图标 */
@media (min-resolution: 2dppx) {
    .icon-home {
        background-image: url('icons/home-2x.png');
    }
    
    .icon-search {
        background-image: url('icons/search-2x.png');
    }
    
    .icon-user {
        background-image: url('icons/user-2x.png');
    }
}

/* 3x分辨率图标 */
@media (min-resolution: 3dppx) {
    .icon-home {
        background-image: url('icons/home-3x.png');
    }
    
    .icon-search {
        background-image: url('icons/search-3x.png');
    }
    
    .icon-user {
        background-image: url('icons/user-3x.png');
    }
}

/* SVG图标的分辨率无关方案 */
.icon-svg {
    background-image: url('icons/icon.svg');
    background-size: contain;
}

🖨️ 打印样式查询：专业的打印优化

打印样式查询为打印输出提供专门的样式优化，确保网页内容在打印时具有良好的可读性和专业外观。

基础打印样式

css

/* 🎉 基础打印样式优化 */

/* 屏幕样式 */
@media screen {
    body {
        font-family: 'Helvetica Neue', Arial, sans-serif;
        background-color: #f5f5f5;
        color: #333;
    }
    
    .print-only {
        display: none;
    }
}

/* 打印样式 */
@media print {
    /* 重置基础样式 */
    * {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    body {
        font-family: 'Times New Roman', serif;
        font-size: 12pt;
        line-height: 1.5;
        margin: 0;
        padding: 0;
    }
    
    /* 隐藏不需要打印的元素 */
    .no-print,
    .navigation,
    .sidebar,
    .footer,
    .btn,
    .form-controls,
    .social-media,
    .advertisements {
        display: none !important;
    }
    
    /* 显示仅打印元素 */
    .print-only {
        display: block !important;
    }
    
    /* 主要内容区域 */
    .main-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }
    
    /* 标题样式 */
    h1, h2, h3, h4, h5, h6 {
        color: black;
        page-break-after: avoid;
        margin-top: 0;
    }
    
    h1 {
        font-size: 18pt;
        margin-bottom: 12pt;
    }
    
    h2 {
        font-size: 16pt;
        margin-bottom: 10pt;
    }
    
    h3 {
        font-size: 14pt;
        margin-bottom: 8pt;
    }
    
    /* 段落样式 */
    p {
        margin: 0 0 6pt 0;
        orphans: 3;
        widows: 3;
    }
    
    /* 链接处理 */
    a {
        color: black;
        text-decoration: underline;
    }
    
    a[href^="http"]:after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        color: #666;
    }
    
    /* 图片优化 */
    img {
        max-width: 100% !important;
        height: auto !important;
        page-break-inside: avoid;
    }
    
    /* 表格样式 */
    table {
        border-collapse: collapse;
        width: 100%;
        margin: 12pt 0;
    }
    
    th, td {
        border: 1pt solid black;
        padding: 4pt 6pt;
        text-align: left;
    }
    
    th {
        background-color: #f0f0f0 !important;
        font-weight: bold;
    }
    
    /* 分页控制 */
    .page-break {
        page-break-before: always;
    }
    
    .no-page-break {
        page-break-inside: avoid;
    }
    
    /* 页眉页脚 */
    @page {
        margin: 2cm;
        @top-center {
            content: "网站标题";
            font-size: 10pt;
            color: #666;
        }
        @bottom-center {
            content: "第 " counter(page) " 页";
            font-size: 10pt;
            color: #666;
        }
    }
}

高级打印样式

css

/* 高级打印样式和布局 */

@media print {
    /* 文章打印优化 */
    .article {
        page-break-inside: avoid;
        margin-bottom: 24pt;
    }
    
    .article-header {
        border-bottom: 2pt solid black;
        padding-bottom: 6pt;
        margin-bottom: 12pt;
    }
    
    .article-title {
        font-size: 16pt;
        font-weight: bold;
        margin: 0;
    }
    
    .article-meta {
        font-size: 10pt;
        color: #666;
        margin-top: 4pt;
    }
    
    .article-content {
        column-count: 2;
        column-gap: 20pt;
        column-rule: 1pt solid #ccc;
    }
    
    /* 代码块打印优化 */
    pre, code {
        font-family: 'Courier New', monospace;
        font-size: 10pt;
        background-color: #f8f8f8 !important;
        border: 1pt solid #ddd;
        padding: 6pt;
        page-break-inside: avoid;
    }
    
    /* 引用样式 */
    blockquote {
        border-left: 3pt solid black;
        padding-left: 12pt;
        margin: 12pt 0;
        font-style: italic;
        page-break-inside: avoid;
    }
    
    /* 列表优化 */
    ul, ol {
        margin: 6pt 0;
        padding-left: 20pt;
    }
    
    li {
        margin-bottom: 3pt;
    }
    
    /* 表单打印处理 */
    input[type="text"],
    input[type="email"],
    textarea {
        border: none;
        border-bottom: 1pt solid black;
        background: transparent;
        padding: 2pt 0;
    }
    
    input[type="checkbox"],
    input[type="radio"] {
        -webkit-appearance: none;
        width: 12pt;
        height: 12pt;
        border: 1pt solid black;
        margin-right: 6pt;
    }
    
    input[type="checkbox"]:checked:after {
        content: "✓";
        font-size: 10pt;
        text-align: center;
        line-height: 12pt;
    }
    
    /* 打印专用内容 */
    .print-header {
        text-align: center;
        border-bottom: 2pt solid black;
        padding-bottom: 12pt;
        margin-bottom: 24pt;
    }
    
    .print-footer {
        text-align: center;
        border-top: 1pt solid black;
        padding-top: 12pt;
        margin-top: 24pt;
        font-size: 10pt;
        color: #666;
    }
    
    /* 目录生成 */
    .table-of-contents {
        page-break-after: always;
        margin-bottom: 24pt;
    }
    
    .toc-item {
        display: flex;
        justify-content: space-between;
        border-bottom: 1pt dotted #ccc;
        padding: 3pt 0;
    }
}

📚 CSS3常用媒体查询学习总结与下一步规划

✅ 本节核心收获回顾

通过本节CSS3常用媒体查询教程的学习，你已经掌握：

屏幕尺寸查询精通：掌握了标准断点系统和精确尺寸范围查询技巧
设备方向查询应用：学会了横竖屏切换的布局适配和特殊场景处理
分辨率查询优化：掌握了高分辨率屏幕的图像和样式适配方法
打印样式查询专业化：学会了创建专业的打印优化样式和布局
实用查询模式：建立了完整的媒体查询实战技能和最佳实践

🎯 CSS3常用媒体查询下一步

响应式实战应用：在完整项目中综合应用各种媒体查询技巧
现代媒体查询特性：学习用户偏好查询、容器查询等新特性
性能优化进阶：掌握媒体查询的性能优化和最佳实践
跨浏览器兼容性：处理不同浏览器的媒体查询兼容性问题

🔗 相关学习资源

媒体查询完整参考：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries
响应式图片指南：https://web.dev/responsive-images/
打印样式最佳实践：https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/
设备像素比参考：https://mydevice.io/

💪 实践练习建议

断点系统练习：为不同项目创建合适的屏幕尺寸断点系统
方向适配练习：开发支持横竖屏切换的移动应用界面
高分辨率适配练习：优化网站在Retina屏幕上的显示效果
打印样式练习：为文档类网站创建专业的打印样式

🔍 常见问题FAQ

Q1: 如何选择合适的屏幕尺寸断点？

A: 基于内容而非设备选择断点，观察内容在什么尺寸下需要调整布局。常用断点：320px、768px、1024px、1200px，但应根据具体项目调整。

Q2: 设备方向查询在什么情况下最有用？

A: 主要用于移动设备和平板，特别是需要在横竖屏之间切换不同布局的应用，如视频播放、游戏、阅读应用等。

Q3: 高分辨率查询会影响性能吗？

A: 高分辨率图片会增加加载时间，建议使用适当的图片格式（WebP、AVIF）和懒加载技术，平衡质量和性能。

Q4: 打印样式需要考虑哪些要点？

A: 使用黑白色彩、serif字体、合适的字号、隐藏不必要元素、优化分页、添加链接URL、确保内容完整性。

Q5: 如何测试不同的媒体查询效果？

A: 使用浏览器开发者工具的设备模拟、在真实设备上测试、使用在线测试工具、测试打印预览功能。

🛠️ 常用媒体查询故障排除指南

常见问题解决方案

媒体查询优先级问题

css

/* 问题：媒体查询样式被覆盖 */
/* 解决：确保媒体查询的顺序和特异性 */

/* 错误：大屏幕样式在前 */
/* @media (min-width: 1024px) { .element { color: blue; } }
   @media (min-width: 768px) { .element { color: red; } } */

/* 正确：从小到大排列 */
@media (min-width: 768px) {
    .element { color: red; }
}

@media (min-width: 1024px) {
    .element { color: blue; }
}

打印样式不生效

css

/* 问题：打印样式没有应用 */
/* 解决：使用!important和正确的选择器 */

@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        font-size: 12pt !important;
        color: black !important;
        background: white !important;
    }
}

"掌握CSS3常用媒体查询是响应式开发的核心技能。通过屏幕尺寸、设备方向、分辨率和打印样式查询，你可以为用户在任何设备和场景下都提供最佳体验。继续学习响应式实战，将这些技巧应用到完整项目中！"

CSS3常用媒体查询2024：前端开发者掌握实用Media Queries技巧完整指南 ​

📚 CSS3常用媒体查询学习目标与核心收获 ​

🎯 适合人群 ​

🌟 屏幕尺寸查询：最实用的设备适配技术 ​

屏幕尺寸查询的核心价值 ​

标准屏幕尺寸断点 ​

精确的尺寸范围查询 ​

高度相关的查询 ​

📱 设备方向查询：横竖屏适配的完美解决方案 ​

基础方向查询 ​

结合尺寸的方向查询 ​

特殊方向适配场景 ​

🖥️ 分辨率查询：高清屏幕的完美适配 ​

基础分辨率适配 ​

分辨率与尺寸结合查询 ​

不同分辨率的图标适配 ​

🖨️ 打印样式查询：专业的打印优化 ​

基础打印样式 ​

高级打印样式 ​

📚 CSS3常用媒体查询学习总结与下一步规划 ​

✅ 本节核心收获回顾 ​