响应式设计

响应式设计要解决什么问题？

• 前提: 用户行为与设备环境不同, 屏幕尺寸、像素密度、使用场景各异;
• 目标: 为不同环境提供不同的页面布局与资源;
• 四个抓手: viewport 声明、媒体查询、相对尺寸、响应式多媒体;

meta viewport 起什么作用？

• 作用: 检查并声明设备屏幕尺寸, 让布局视口与设备宽度一致;
• 属性: name="viewport", 具体配置写在 content 中;

<meta
  name="viewport"
  content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>

• meta 的其余元数据类型见 文档头部;

媒体查询如何改变布局？

• 写法: @media (条件) { 规则 };
• 用途: 在媒体条件成立时应用另一套布局与元素尺寸;

@media (max-width: 600px) {
  .sidebar {
    display: none;
  }
}

相对尺寸为什么更适合弹性布局？

• 单位: 百分比、rem、vw 等, 分别相对于父元素、根字号与视口宽度;
• 效果: 尺寸随环境变化, 元素之间保持比例, 实现弹性布局;
• 对比: 固定像素尺寸在窄屏或大屏上都不会自适应;

响应式多媒体如何实现？

• 手段: srcset 属性或 <source> 元素;
• 细节: 图片见 响应式图片, 音视频见 音频与视频;