什么是 响应式页面 ？

一个网站能够兼容多个设备终端，它可以自动识别设备尺寸并相应调整布局，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生。

布局名称：

响应式页面

布局优点：

灵活、适配、一致性、节省资源

使用工具：

Figma，Principle，VScode，sketch

技术要求：

flex、grid、rem、media

在过去，网站通常就是为了电脑大屏幕展示而设计，如果用手机访问，只能在巴掌大的屏幕里看缩小版的页面。虽然还有手机专供的 WAP 页面，但因为太简陋也无济于事。
随着智能手机、3G、4G、HTML5 的普及，使用手机访问网站的人越来越多，为了让用户在手机上看到更合适的布局，且兼顾开发的效率，响应式的概念就被提出了。

响应式和自适应

响应式布局常常和自适应布局搞混。其实通过左侧的动图我们很容易能理解两者的区别。
 响应式布局：容器大小随窗口大小而变化。
自适应布局：容器大小不随窗口大小而变化，边距随窗口大小而变化。
通俗点说，自适应就是为不同客户端分别提供一套独立的前端代码，和响应式使用一套代码适配多种客户端不同。
响应式适合应用在一些简单的官网、展示类页面，展示的内容大致相同。而自适应适合应用在需要在不同客户端类型有较大差异的网站，这样只使用一套前端代码就完全行不通了。

响应式设计基于栅格布局和CSS3的流动性网页设计，可以让网页随着屏幕变化而响应。
设计师通过设计让内容在不同的设备上都能以最合理、舒适的方式展现，确保用户在不同设备上使用的时候，都会觉得这些内容就是专门为这个设备而设计的，实现体验最大化，而不是单纯的靠缩放而来。这种无缝的体验，让桌面设备的网页在移动设备上也能轻松的阅读并操作，现在已经成为网页设计领域中不可忽略的必要组成部分。

国外几个内容网站，YouTube、Spotify、Netflix 和Behance，都使用了「内容墙」的设计方式，以突出内容的丰富度。
由于这种设计通常会保持容器之间的间距不变，这就需要容器大小变化以适应窗口大小变化了。响应式的布局思路，很好地帮助完成内容墙的设计。
YouTube 选择 1143-1966px 作为4个容器的前后断点。这个页面宽度区间很大，达到了824px（远超5个容器的跨度335px）。
YouTube认为1行4个视频是用户浏览的最好数量； 他们想把这种布局覆盖主流的(约66.25%)屏幕宽度 1280-1920px。

响应式常用布局样式

对页面进行响应式设计，需要对相同的内容进行不同宽度的布局设计。首先要根据目标用户和使用环境等定位考虑侧重的是桌面端还是移动端：桌面优先（从桌面端开始向下设计）；移动优先（从移动端开始向上设计）。

响应式布局样式常见的有5种：
1.挤压-拉伸    2.上下-左右    3.删减-增加    4.变换位置    5.隐藏-展开

1.挤压-拉伸

页面中的“消息”内容随着屏幕的变化拉伸挤压，适用于文本内容、纯色背景、按钮、填选框等伸缩不会发生变形的元素。

2.上下-左右

模块内容从左右排版变为上下排版，两栏、三栏变为一栏，适用于表单表格、图文列表、图片列表、主内容+右侧推荐等所有左右排版的组合。

3.删减-增加

移动端不同于桌面端网页，移动端可视区域小，而且使用环境可能在公交、地铁等无法专心操作的环境里，所以应当删减掉不重要的内容，保留主线任务内容，及足够用户分析判断的内容即可。

4.位置变换

桌面端右侧的品牌介绍、网站链接等内容，移动端时变为左右排版放置在顶部。适用于左侧导航+顶部导航、顶部分类+左侧分类、介绍等内容。

5.隐藏-展开

桌面端顶部的分类，在移动端时变为筛选icon，点击展开即可分类筛选；nav bar在移动端时保留了搜索框，其他收进汉堡icon，点击展开所有导航。隐藏-展开适用于分类、导航等内容。

设计展示

做好响应式设计的六个点：
1. 确定响应式的布局变化（使用哪类布局容器）； 2. 根据内容复杂度确定屏幕分界点，来确定自己需要设计几个不同的版本； 3. 使用适合页面内容的栅格列数； 4. 在不同屏幕下适当调整相应的样式，以保证良好的阅读体验和美观度； 5. 提前考虑特殊的适配方案。