vlambda博客
学习文章列表

近几日有人问响应式网页设计该怎么预览，说实话，响应式不太怎么了解，知道怎么一回事但是感觉不是很专业，最近利用一些闲于时间补充了下专业知识，同时也为壹念视觉这个官网过度响应式做准备吧，研究发现响应式几乎是当代网页设计的基础构成之一了，现在都非常普遍，那今天就以响应式这个话题和大家一起聊聊里面的设计原理，其中也整理了几款功能强大的响应式页面测试工具，可以快速帮我们测试设计的网页在不同设备尺寸上的显示效果，从而更好的辅助我们去设计~

一、响应式网页原理

就目前的网页设计布局来分我们可分为静态布局和响应式布局，静态顾名思义就是固定的嘛，不跟随浏览器宽度变化而变化，响应式就是比较智能，可以按照设备大小自我调整，这可能是我们很多人看到这个词眼时内心的认知，那具体是不是这样呢？我们看看下面的详解：

静态布局和响应式布局区别：

静态式布局

当浏览器窗口缩小内容被遮挡时，只能通过拖动滚动条显示布局。不管在哪种设备打打电脑小电脑，哪种浏览器上浏览都是一个样。移动设备上则显示太小或不全，这种就是静态式也可称作固定式（目前壹念视觉官网就是出于这个阶段，下个阶段也是要将他变成响应式！）

响应式布局

这个就很好理解了，可以让我们的网页在不同屏幕分辨率设备上面展示不同的布局，让页面元素宽度随着窗口调整而自动适配，元素位置、大小都会随之改变，显示效果和交互方式都会发生变化各不相同

布局实现

采用何种方式实现布局设计，也有不同的方式，这里基于页面的实现单位而言，分为四种类型：固定布局、可切换的固定布局、弹性布局、混合布局。

可切换的固定布局、弹性布局、混合布局都是目前可被采用的响应式布局方式。

其中可切换的固定布局的实现成本最低，但拓展性比较差；而弹性布局与混合布局效果具响应性，都是比较理想的响应式布局实现方式。只是对于不同类型的页面排版布局实现响应式设计，需要采用不用的实现方式。通栏、等分结构的适合采用弹性布局方式、而对于非等分的多栏结构往往需要采用混合布局的实现方式。

布局响应对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：

桌面优先（从桌面端开始向下设计）

移动优先（从移动端向上设计）

无论基于那种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化（发生布局改变的临界点称之为断点）， 我们通过JS获取设备的屏幕宽度，来改变网页的布局，这一过程我们可以称之为布局响应屏幕。常见的主要有如下几种方式：

布局不变

即页面中整体模块布局不发生变化

布局改变

即页面中的整体模块布局发生变化

很多时候，单一方式的布局响应无法满足理想效果，需要结合多种组合方式，但原则上尽可能时保持简单轻巧，而且同一断点内（发生布局改变的临界点称之为断点）保持统一逻辑，否则页面实现得太过复杂，也会影响整体体验和页面性能。

最后测试响应式网站要注意以下几点：

布局调整

网页能够自动识别屏幕宽度调整布局，不需要横向滚动。比如：页面横向上有两个并排的元素，如果宽度太小，放不下两个元素，第二个元素会自动显示到第一个元素的下方，不会在水平方向溢出，从而避免了水平滚动。

文字缩放和换行

网页能够自动识别屏幕宽度调整文字大小并换行。

图像缩放

网页能够自动识别屏幕宽度对图片进行缩放，使其不需要放大缩小就能显示完全。

显示效果和交互方式可能发生改变：网页的交互方式和显示效果也可能发生变化。比如，在PC端，一个下拉列表是以Dropdown形式呈现，但在移动端变成右侧划出的菜单。当然交互方式和显示效果是否发生变化，取决于设计。

屏幕旋转

当旋转屏幕时，布局、文字、图像和交互可能发生改变。

移动端的键盘

对于移动平台，要关注键盘弹出时样式是否正常。

二、响应式网站测试工具

Media Queries

点开任意一个页面则进入了当前相应官网，如果你用电脑打开的则是电脑端界面，反之你手机打开的则可以真实在手机体验移动端页面，极具参考学习价值！

体验网址↓

https://mediaqueri.es/