谈谈响应式布局

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

为何?

为何须要响应式设计,想必这点不说你们都能想到答案.如今是一个移动为先的时代,咱们要是将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...

小结

以上咱们已经将响应式入门的东西都谈过一遍了,大致上都能根据以上模式本身进行一些小示例的开发了,马上动手吧.