实现响应式网页设计

为什么需要响应式网页

点击打开视频讲解更加详细

随着网页数量和质量的上升，以及设备种类和数量的增加，不同设备查看不同网页导致的缩放问题、排版问题等一系列前端问题越发明显。

想要解决他们，我们可以为不同类型的设备编写不同样式的代码，做不同版本的测试。

然而这样做有两个弊端：

1. 工作量过大
2. 同种类型设备的尺寸相差也可能很大，有时尽管专门设计了对应版本，依然无法保证每个用户的设备都能较好适配

因此我们需要使用响应式网页来解决这个问题，通过设备自适应解决排版问题而非程序员编写对应代码适应设备，这样一来就能减少工作量，同时保证绝大多数设备都能很好适配

什么是响应式网页

利用 CSS 和 JavaScript 自动根据设备屏幕尺寸调整页面的布局和样式的网页，主要解决固定
宽度和影响布局的元素的问题

如何实现响应式网页

1. 设置前置 meta 元素

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

设置 name 属性值为 viewport，content 中的内容意味设置宽度为设备宽度，缩放比例为1（不缩放），因此移动设备查看 PC 网页时就不会缩放的很小，而是原始比例显示

2. 设置了固定宽度的区域

对于这类区域，有时会出现横向滚动条，很不方便

因此，我们可以使用百分比宽度，使其根据浏览器可视区域自动调整尺寸

即 width = 100% 或 max-width = 80%

3. 使用布局的区域