响应式设计实践 - 学无止境

一、什么是响应式设计

响应式设计（Responsive Web Design）指让网页在不同设备（PC、平板、手机）上都能提供良好的浏览体验。核心思想是"一次设计，到处适配"。

二、Viewport 设置

这是响应式设计的第一步，告诉浏览器以设备宽度来渲染页面：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

三、媒体查询（Media Queries）

媒体查询是响应式设计的核心工具，根据屏幕宽度应用不同的 CSS 样式。

常见断点

设备	屏幕宽度	断点
手机（竖屏）	< 640px	@media (max-width: 640px)
平板	640px - 1024px	@media (max-width: 1024px)
桌面	> 1024px	@media (min-width: 1025px)

使用示例

/* 桌面端：3列布局 */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* 平板：2列布局 */
@media (max-width: 1024px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 手机：1列布局 + 隐藏侧边栏 */
@media (max-width: 640px) {
    .card-grid {
        grid-template-columns: 1fr;
    }
    .sidebar {
        display: none;
    }
}

四、移动端适配方案

1. rem 适配

// 设置根字体大小（1rem = 屏幕宽度/10）
function setRem() {
    const width = document.documentElement.clientWidth;
    document.documentElement.style.fontSize = (width / 10) + 'px';
}
window.addEventListener('resize', setRem);
setRem();

// 使用时
// .title { font-size: 0.16rem; }  // 在375px屏幕上 = 16px

2. vw/vh 单位

.hero {
    height: 100vh;           /* 视口高度 */
    width: 100vw;            /* 视口宽度 */
    font-size: clamp(1rem, 2.5vw, 2rem);  /* 最小1rem，最大2rem */
}

3. 弹性图片

img {
    max-width: 100%;   /* 不超过容器宽度 */
    height: auto;      /* 保持宽高比 */
}

/* 根据分辨率加载不同图片 */
// <img srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
//      sizes="(max-width: 640px) 100vw, 50vw"
//      src="default.jpg">

五、移动优先 vs 桌面优先

策略	默认样式	媒体查询	适用场景
移动优先	手机端	min-width（从小往大加）	新项目、移动端流量大
桌面优先	桌面端	max-width（从大往小减）	旧项目改造、后台系统

六、实际开发技巧

布局优先用 Flexbox/Grid：它们天然具有弹性，比浮动布局更适合响应式
使用相对单位：em、rem、%、vw/vh 代替固定 px
文字使用 clamp()：font-size: clamp(1rem, 2vw, 1.5rem)
交互适配：移动端用 touch 事件，桌面端用 click；悬停效果在触屏上无效
按需加载：移动端不加载桌面端专用的重资源

七、总结

响应式设计不能只靠媒体查询，要从布局策略、单位系统、资源加载等多维度考虑。推荐采用移动优先的策略，先保证核心功能在手机上可用，再逐步增强桌面体验。