响应式布局
为什么网页开发应该遵循移动端优先原则?
首先定义在较小屏幕尺寸上应该渲染的布局！较小的屏幕尺寸需要更简单的布局，然后，调整你的样式以适应较大的设备。如果你先设计复杂情况，那么接下来你反而要努力将其简化1。
媒体查询
通过媒体查询，你可以直接在 CSS 中针对不同的媒体类型定义不同的样式。
使用 CSS
css
@media <媒体类型> and|not|only (<媒体功能>) {
/* css-code */
}媒体类型：
| 值 | 描述 |
|---|---|
| all | 所有设备 |
| 打印机或打印预览 | |
| screen | 电脑屏幕，平板或手机 |
| speech | 屏幕阅读器等发声设备 |
常见媒体功能：
| 值 | 描述 |
|---|---|
| min-height | 设备中的页面最小可见区域高度 |
| max-height | 设备中的页面最大可见区域高度 |
| min-width | 设备中的页面最小可见区域宽度 |
| max-width | 设备中的页面最大可见区域宽度 |
| device-pixel-ratio | 设备上物理像素和设备独立像素（逻辑像素）的比例 |
| prefers-color-scheme | 用户倾向于选择亮色还是暗色的配色方案 |
下面这个例子展示了当用户偏好为深色主题时，将页面背景颜色修改为黑色，将文字修改为白色：
css
@media (prefers-color-scheme: dark) {
body {
color: #fff;
background-color: #000;
}
}使用 JavaScript
有些情况下需要在 JS 里进行媒体查询，可以使用 window.matchMedia 方法，它接受一个字符串表示 CSS@media 规则，返回值为一个 MediaQueryList 对象，该对象包含两个属性：
media；查询结果的内容matches: 是否与当前查询匹配
用法如下：
js
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
// ...夜间模式 逻辑处理
}