菜单
文章 前端

前端入门篇3：响应式网页设计101

Yale

Yale

• 阅读时长6分钟

你肯定有过这样的经历——用手机浏览器打开某一个网页，然后发现页面和电脑上显示的一摸一样（只不过缩放得很小），密密麻麻完全看不清上面有些啥。于是你费力地不停缩放页面，只为看清内容和定位自己浏览到哪了。这种糟心的体验，简直让你想仰天怒吼，WTF！

为了解决这个问题，前端设计师们采用了一种方法，那就是响应式网页设计（Responsive web design，RWD）。通过使用这种设计方法，可以实现同一网站在手机、平板、电脑等各种尺寸各异的屏幕上舒服地阅读和导航，同时减少缩放、平移和滚动等等糟心地体验。

1 简单的Div+CSS响应式布局

如果你要在PC端体验什么叫响应式布局，最简单的方法是拖动浏览器边框，让其宽度变小，看页面是否随之变化。其次，另有一个体验和检查响应式布局的利器——Google Resizer(需翻墙)。只要在输入框输入网址，就可以查看不同视窗（viewport）下的页面效果。

Google Resizer

说起来好像很厉害的样子，那具体要怎么做呢？首先，我们不妨以四个层并列一行的布局为例，来看看怎样实现最为简单基础的响应式页面布局。

<div class="row">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

上一篇前端入门篇（二）：如何用CSS+DIV快速布局页面里面讲过，因为<div></div>默认的排列方式是纵向排列的，所以要实现同一行层里，四个层横向排列的话，要为row类声明样式display:flex;。

当我们的终端从PC变为手机的时候，浏览器视窗（viewport）的宽度变窄了，每个层都会被挤压，每个层里面的东西也会相应地被挤压缩小，如下图。

非RWD页面视窗收窄示意图

毫无疑问这会影响观感和体验。那运用RWD思维，怎么初步简单地解决这一问题呢？很简单，视窗变窄以后，把最右边的层依次往下挪动就行了（效果如下图）。

层随着视窗收缩向下挪动

而这种效果的代码实现也非常简单，只要在CSS加一行属性就够了：

.row {
      width:100%;
      display:flex;
      flex-wrap:wrap; /*没错就是它*/
}

2 响应式页面布局的要素

上面是非常简单的响应式布局基础，如果要进阶的话，必须先了解几个重要的概念。

2.1 Viewport

首先就是上文出现过的视窗（viewport）。什么是viewport呢？简单地说，就是一个网页的可见区域，不同的设备上的viewport是不同的。针对这一点，我们在网页设计的时候，就可以在HTML的<head></head>中写下如下语句：

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

其中width控制viewport的宽度，这里指定为device-width，即为设备的宽度，也就是告诉浏览器要根据设备屏幕尺寸调整这个网页。

initial-scale控制页面初始缩放程度。页面呈现大小等于设置的宽度乘以initial-scale的值——如果是1.0的话，页面宽度等于设备宽度。换句话说，如果这个值是2.0的话，整个页面的宽度会是设备的两倍——你就要左右拖动才能看全整个页面了。

2.2 Media Queries & Breakpoints

上述viewport还只是RWD的一个基本设置，真正能玩出各种花样的就是media queries和breakpoint这套组合拳了。

media queries是CSS3中一种非常便捷的响应式布局方法。它可以根据你所设置的breakpoints，相应地调整页面布局和样式。它的主要应用形式如下：

@media screen and (<breakpoint>) {
  选择器{
	属性：属性值；
  }
}

来举个栗子方便理解吧。还是上面那个4个层并列的例子,使用上文的flex-wrap方法，页面会根据viewport宽度自动调整。但是由于「自动」得不够智能，所以会出现下图三个层在上、一个层在下的状况。

交给浏览器决定层下沉的状况

这就有点尴尬了。我们拖动页面的时候发现viewport在620px到820px之间会出现这种状况。我们通常会希望能避免这一状况，这里就轮到media queries和breakpoint这套组合拳了。

我们可以不使用上文所述方法修改.row样式，取而代之地，在CSS中设置页面宽度只有在小于600px的时候，层才可以自动下沉。

@media screen and (max-width:600px) {
  .row{
    flex-wrap:wrap;
  }
}

另外，在实际使用中，breakpoint可以不止一个，换而言之，你可以这么用media queries:

@media screen and (min-width:500px) and (max-width:800px){
  选择器{
	属性：属性值；
  }
}

3 前端入门篇总结

作为一个技术小白，仅仅通过一些公开课的学习，厚颜地来写这三篇入门文章，其实是有点汗颜的。不过考虑到很多老手和专家，会忘记自己还是新手时的疑问和状况。所以我觉得，自己以一个小白的身份来写一些面向小白的技术文章，还是有其意义的。

写这个系列并不是为了作一个全面系统的入门教程，只是想浮光掠影地谈一些原理和方法，做一块「引玉」的「砖」吧。

如果你看完这些皮毛，真的对web前端产生了兴趣，有深入探究的欲望，我会强烈推荐以下系统且全面的入门教学公开课程：

展示评论