响应式布局

概念

• 传统的开发方式：自适应，即 PC 一套 css ，移动端一套 css
• 响应式布局：同一页面在不同屏幕尺寸下有不同的布局

媒体查询

针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

all：适用于所有设备

print：打印模式

screen：屏幕

speech：语音合成器

@media screen {}

实现方案

1. 移动端优先，先写移动端的样式，然后过渡到 PC 端。使用 min-width 从小到大适配
2. PC 端优先，先写 PC 端的样式，然后过渡到移动端。使用 max-width 从大到小适配

响应阔值设定

• Extra small < 576px
• Small >= 576px
• Medium >= 768px
• Large >= 992px
• X-Large >= 1200px
• XX-Large >= 1400px