CSS响应式设计媒体查询

响应式设计是现代Web开发的必备技能，媒体查询让网站在各种设备上都能完美展示。本文分享3个完整可运行的CSS代码块，掌握响应式布局核心技术。

完整媒体查询基础模板

媒体查询是响应式设计的基石，根据设备特性应用不同样式。

/* ============================================
   完整响应式媒体查询模板
   覆盖：手机、平板、桌面、大屏
   ============================================ */

/* 基础样式（移动端优先） */
:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --text-color: #333;
    --bg-color: #fff;
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 30px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background: var(--bg-color);
}

.container {
    width: 100%;
    padding: 0 var(--spacing-md);
    margin: 0 auto;
}

/* 超小设备（手机竖屏）< 576px */
@media (max-width: 575.98px) {
    h1 { font-size: 24px; }
    h2 { font-size: 20px; }
    .container { padding: 0 var(--spacing-sm); }
    .hide-mobile { display: none !important; }
}

/* 小设备（手机横屏/平板竖屏）≥ 576px */
@media (min-width: 576px) and (max-width: 767.98px) {
    .container { max-width: 540px; }
    h1 { font-size: 28px; }
}

/* 中设备（平板横屏）≥ 768px */
@media (min-width: 768px) and (max-width: 991.98px) {
    .container { max-width: 720px; }
    h1 { font-size: 32px; }
}

/* 大设备（桌面）≥ 992px */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .container { max-width: 960px; }
    h1 { font-size: 36px; }
}

/* 超大设备（大屏桌面）≥ 1200px */
@media (min-width: 1200px) {
    .container { max-width: 1140px; }
    h1 { font-size: 40px; }
}

/* 横屏模式 */
@media (orientation: landscape) {
    .hero-section { min-height: 80vh; }
}

/* 高DPI屏幕（Retina） */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo { background-image: url('logo@2x.png'); }
}

/* 打印样式 */
@media print {
    body { background: white; color: black; }
    .no-print { display: none !important; }
}

完整Flexbox响应式布局

Flexbox是现代布局的首选方案，轻松实现各种复杂布局。

/* ============================================
   Flexbox响应式布局完整实现
   ============================================ */

/* Flex容器基础 */
.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0 -10px;
}

/* Flex项目 */
.flex-item {
    flex: 1 1 100%;
    padding: 0 10px;
    margin-bottom: 20px;
}

/* 响应式栅格系统 */
.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

/* 平板断点响应 */
@media (min-width: 768px) {
    .col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
}

/* 桌面断点响应 */
@media (min-width: 992px) {
    .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
    .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
}

/* 导航栏响应式 */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: var(--primary-color);
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 20px;
}

/* 移动端汉堡菜单 */
@media (max-width: 767.98px) {
    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: var(--primary-color);
        padding: 20px;
    }

    .nav-menu.active {
        display: flex;
    }

    .hamburger {
        display: block;
    }
}

完整jQuery响应式工具包

jQuery简化DOM操作和事件处理，提升开发效率。

/* ============================================
   jQuery响应式工具包完整代码
   ============================================ */

$(document).ready(function() {

    // 1. 汉堡菜单切换
    $('.hamburger').click(function() {
        $('.nav-menu').toggleClass('active');
        $(this).toggleClass('open');
    });

    // 2. 平滑滚动到锚点
    $('a[href^="#"]').click(function(e) {
        e.preventDefault();
        const target = $(this.hash);
        if (target.length) {
            $('html, body').animate({
                scrollTop: target.offset().top - 80
            }, 500);
        }
    });

    // 3. 返回顶部按钮
    const $backToTop = $('.back-to-top');

    $(window).scroll(function() {
        if ($(this).scrollTop() > 300) {
            $backToTop.fadeIn();
        } else {
            $backToTop.fadeOut();
        }
    });

    $backToTop.click(function() {
        $('html, body').animate({ scrollTop: 0 }, 300);
    });

    // 4. 导航栏滚动效果
    const $navbar = $('.navbar');
    let lastScroll = 0;

    $(window).scroll(function() {
        const currentScroll = $(this).scrollTop();

        if (currentScroll > 100) {
            $navbar.addClass('scrolled');
        } else {
            $navbar.removeClass('scrolled');
        }

        lastScroll = currentScroll;
    });

    // 5. 图片懒加载
    function lazyLoad() {
        $('img[data-src]').each(function() {
            const $img = $(this);
            if ($img.offset().top < $(window).scrollTop() + $(window).height() + 100) {
                $img.attr('src', $img.data('src')).removeAttr('data-src');
            }
        });
    }

    $(window).on('scroll resize', lazyLoad);
    lazyLoad();

    // 6. 视口尺寸检测
    function getViewport() {
        return {
            width: $(window).width(),
            height: $(window).height(),
            isMobile: $(window).width() < 768,
            isTablet: $(window).width() >= 768 && $(window).width() < 992,
            isDesktop: $(window).width() >= 992
        };
    }

    // 7. 窗口大小变化防抖
    let resizeTimer;
    $(window).resize(function() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
            console.log('Viewport:', getViewport());
        }, 250);
    });

    console.log('✅ jQuery响应式工具包已加载');
    console.log('当前设备:', getViewport());
});

响应式设计最佳实践

1. 移动端优先：从小屏幕开始设计，逐步增强
2. 弹性图片：img { max-width: 100%; height: auto; }
3. 相对单位：使用rem/em/vw/vh替代固定px
4. 触摸友好：按钮最小44x44px，间距足够
5. 性能优化：图片懒加载，避免重排重绘
6. 渐进增强：核心功能可用，高级特性优雅降级

技术分享，欢迎评论区交流讨论。