谈谈响应式布局

今天在这里就略微谈一下响应式布局吧,想必大家都知道响应式布局已经在这个移动端为主流的时代成为了避不开的话题之一,接下来我们从小到大来谈谈响应式网页设计的基本原则.

为什么?

为什么需要响应式设计,想必这点不说大家都能想到答案.现在是一个移动为先的时代,我们要是将PC端的网页照搬到移动端所行就会出现很多尴尬的情形,比如:

1. 主要内容无法第一时间呈现的用户面前

2. 用户需要麻烦的缩放操作才能看到页面的一小部分

3. 手机点击无法正确点击到正确的按钮

4. ....

这些都会对我们的用户移动体验造成不好的影响导致我们用户的流失.所以响应式网页为了解决如上的问题就出现了.

是什么

响应式网页设计(Resposive web design)也被称为RWD,或者我们称为自适应网页设计,是一种网页设计的技术做法.
虽然我们前面说到的是移动端,但是概念上,RWD目的是使网站能在多种浏览设备上阅读和导航,同时减少缩放,平移和滚动.
接下来我们开始学习下响应式网页设计中需要的知识吧.

viewport

这个是我们必须要知道的,就和下面这段html代码一样
<meta name="viewport" content="width=device-width, initial-scale=1.0">
什么是viewport?
viewport就是用户网页的可视区域,而viewport随着设备的变化,在移动端上会小于PC端.
在平板电脑和移动电话出现之前,网页值需要根据电脑屏幕设计即可,现在可就不同了,在移动端上PC端的设计会太大以至于无法适应viewport,而通常为了解决这个问题,浏览器会自动的缩小了网页并显示在移动端上.
我们之前写的那段<meta>标签又代表着什么呢?
一个<meta name="viewport">标签代表着一份如何控制页面大小与缩放的说明书.width=device-width这部分就和字面意思一样将页面宽度设置为设备宽度,而initial-sacle=1.0则是设置为初始缩放比例为1.0,如果不设置将会在切换横屏时保持之前的页面宽度.

像素与DIP与pixel ratio

我们需要理解一下像素和DIP(device independent pixel,设备独立像素),假设我们有一台2560px宽的设备,如果我们DIP为1280,则我们的pixel ratio为2.我们的浏览器并不是根据物理硬件的宽度而工作的,而是根据DIP宽度工作的,它将像素与实际距离关联起来.
这部分我们就到此为止吧,稍作了解就好哦.

媒体查询(Media Query)

媒体查询(Media Query)这也是我们谈到响应式不得不谈的一部分,媒体查询是什么呢,正如我们下面所写的代码这样就是所谓的媒体查询了.
media screen and (min-width:500px) and (max-width:600px)
这里给个MDN的传送门

媒体查询的使用方式

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

媒体查询包含一个媒体类型和至少一个类似(max-width: 500px)限制范围表达式.在mdn上详细的介绍,在响应式布局中我们只要记住screen and ()[and ()]这种形式就可以了.

断点(Breakpoints)

在媒体查询中我们设置了不同的样式,通过不同的宽度变化来更改应用的样式,而这个样式变化的条件(临界点)就是我们这里所谈的断点了,断点的设置对于我们响应式设计是十分重要的,在这里我根据网上的资料总结一下断点如何设置.
首先,我们设计响应式网页要移动为先,意思就是我们要先设计移动端上的网页,然后再在宽度逐渐增长的情况下慢慢寻找自己心中的断点,并进一步设计宽度更大情况下的网页布局,从mobile->tablet->PC,逐步设计,也是所谓的渐进增强.

栅格设计(grid)和弹性盒(Flex box)

grid,我们最常见的一种响应式设计的模式,它将页面分割为一个个动态网格,并且在宽度变小的情况下会顺延到下一格,我们常见的使用了grid的范例如bootstrap等都十分的简单易用.
而flex box正是目前最热门的,并且被各浏览器强烈推荐的一种模式,但是在使用前首先我们要确保我们做好了各个浏览器的兼容,包含了所有版本的浏览器引擎前缀.关于flex box,可以看看我这篇博文.

怎么做?常见的模式

1. 大体流动模型(mostlyfluid)

2. 掉落列模型(column drop)

3. 活动布局模型(layout shifter)

4. 画布移除模型(off canvas)

掉落列模型(column drop)

最小视窗模式时,我们三个内容块每一个都占据一行,并且随着宽度的增加,到达断点时,则前两个内容块一起占据一行,再根据宽度增加,到达断点时,则三个内容块一起占据一行并且开始随着宽度的增加而不再延伸,从而变为增加外边距.

大体流动模型(mostly fluid)

这与掉落列模型相似,但是更像grid.
最小视窗模式时,我们内容块每个都与掉落列模型(column drop)一样每一个都占据一行,随着宽度的增加,列出现并把二三块一起占据一行,然后随着宽度的增加我们可以展示多个列,并在最后断点时,宽度固定并且随着宽度增加而增加外边距.

活动布局模型(Layout Shifter)

可以说是最灵活的布局模型,我们不是单纯的更改重排到其他列下方,而是可以更改模块的顺序.也就是使用order属性.

画布溢出模型(off canvas)

简单来说就是将不常用的导航或菜单放在画布之外,如导航栏变为按键.

实例

1. Column Drop
   http://codepen.io/thewindswor...

2. Mostly Fluid
   http://codepen.io/thewindswor...

3. Layout Shifter
   http://codepen.io/thewindswor...

4. Off Canvas
   http://codepen.io/thewindswor...

小结

以上我们已经将响应式入门的东西都谈过一遍了,大体上都能根据以上模式自己进行一些小示例的开发了,立刻动手吧.