基于CSS搭建一个响应式网站

作者：D姐 日期：2013-01-28 点击：2974
Responsive

特别声明：此篇文章由D姐根据Jason Michael的英文文章原名《Build a basic responsive site with CSS》进行翻译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://www.netmagazine.com/tutorials/build-basic-responsive-site-css以及作者相关信息

——作者：Jason Michael

——译者：D姐

demodownload

响应式设计有很多误会，D姐根据Jason Michael通过带领我们搭建一个简单的响应式网站，来实现一些所谓的神话。

这篇文章首次出现在.net杂志的第 231号问题，这本杂志是全球web设计开发人员最钟爱的杂志

几乎每个人都在讨论响应式设计，但是我不敢确定每个人都理解他是用来做什么的？许多web设计者开发者希望我能解决这些存在的误解，而我也在尝试这么做。

简单来说，响应式设计不是专门为手机做网站，而是为了使网站布局适应多种设备大小设计的。

在这篇文章里，我将给你展现响应式设计背后的细节原则，所以我们需要真正理解这些原则。一旦我们理解了他，就可以在大屏幕小屏幕设备上，完美的呈现一个网站了。

响应式设计已经成为一个热门话题，原因有越来越多的人，使用手机设备访问互联网，如iPhone，ipad，黑莓。

一个网站不应该是只针对pc端，或是手机设备，而是应该一个布局适应不同设备大小，这个理解变得越来越重要。

如果你认为一个新发明会让我们对未来有一个憧憬,那么一个可以根据用户浏览设备自动适应的布局，将变成未来不可替代的主流。

媒体查询变得如此受欢迎的主要原因之一是基于一个事实，就是网站在设计和构建阶段，无法预估会在什么样的设备上面展现。他们变得难以控制，也许他们的固定宽比用户的浏览设备要宽很多，使得要找到他们查找的东西，很难放大或缩小。

很沮丧吧？当然。但是更沮丧的是，作为这些网站的一位开发者，是不是应该用一种办法让网站适应任何设备大小呢？

许多网站使用媒体查询隐藏他们认为不重要的内容部分。这样通过定制内容，就可以使得小屏幕设备的用户轻松使用网站。

但是为什么对于一个移动设备的用户，不能跟桌面用户从网站上获取同样的信息呢？

借助媒体查询我们完全可以根据屏幕尺寸定制我们网站的布局，这个很棒，但是我们确实需要提供网站的好几个尺寸，以适应屏幕大小吗？而且为什么我们不能把网站优雅的实现呢？

用户受挫

一些人认为削减一些他们认为对于用户不重要的内容，是可以的。但是，你怎么确定你删减的信息，或是放到第二页的内容，对于我而言不是最重要的呢？你不能确定。

举一个例子，我以前在我的苹果本上浏览 耐克的足球网站，阅读到有关足球学院在英超联赛的文章,我发现它真的很有趣，而这就是我浏览这个网站的主要原因之一。

耐克的足球网站

然而，当我试图用iphone给我的一个朋友展示的时候，我突然发现耐克有一个专门的手机网站，而且耐克足球手机网站由这样两部分组成：一个是最新的比赛战靴，一个是用在比赛战衣上的新技术。而这两部分我都不感兴趣。

我尝试用ipad打开，他再次跟pc上显示的完全不同，而且仍旧没有我寻找的足球学院信息。

耐克的足球网站

耐克网站并不是个例，像这样做的有成百上千的网站。我觉得很不爽，就因为我使用了不同的浏览设备，我就应该看到不同的页面，好像因为我的选择而应该受到这样的惩罚一样。我觉得如果内容不值得在小屏幕设备上显示，那么它可能不值得给任何人显示。

首先我们需要理解的是，响应式设计不是仅仅针对移动设备，而是考虑到所有的屏幕尺寸。其次，设计一个好的响应式网站，比单纯使用媒体查询并通过大量的网络设备测试，要花费更多的时间和精力，而最重要的是给你的网站提供尽可能一致的用户体验。

我们知道一个响应式网站只需要一个代码库，这一点很棒，它意味着我们不必为每个设备修改我们网站的内容。但是许多网站隐藏对于手机用户不必要看到的内容，这里就存在两个问题。

首先，它影响了浏览网站的手机用户的体验。其次，在我们样式表中隐藏的样式，并不意味这些内容不需要下载。尤其是对于那些访问速度慢的用户来说，就会大大影响性能。

也许最好的方法是为移动端或是更小的设备设计一个网站。首先，你可以关注哪些信息是网站需要提供的最重要的信息，如果有必要的话，你可以在小屏幕的设备上面，用到网格布局，大图片和媒体查询的地方，使用条件加载技术。

许多网站在移动设备上面无法使用的真正原因，是因为他们不能使用任何设备。如果在一开始规划设计的时候做足了准备，那么他就会向前向后兼容的很好。一个响应式的网站，并不是必须以移动设备为设计目标。如果他设计的很到位，那么他不必为任何设备设计，也会自动适配。Ethan Marcotte在他的《Responsive Web Design” from A List Apart》的一文中这样说道：“与其为日益增长的web设备设置很多断点，不如把他们当成相同的经历对待”。他写道：“我们可以设计一个很优秀的设计效果，如果把技术标准融入到我们的设计当中，那么不仅使得他们布局更加灵活，也能在设备上更好的渲染他们。总而言之，我们需要响应式设计实践”。

耐克的足球网站

随着大量设备的改进，响应式设计不会完全阻碍新设备的改变，然而，他应该需要消除设备改进中的显示不同。我们通过他搭建的网站在ie6下面无法工作。这是一个让人疯狂的问题，我们花数小时为他写应用的hack。然而，真正在ie6下面出现的问题并不是很多，只是我们的网站搭建的错误而已。伴随着可用的web设备的大量涌入，我们搭建网站的一个重点就是，去适应这个改变。

分步解说

这篇文章的目的，就是为了让一个网站可以在大屏幕小屏幕设备上面的完美呈现。为所有尺寸的设备保留所有网站内容。而且借助媒体查询，我把水平显示的导航改为在小设备上面的垂直显示，并为用户提供足够的留白，以适应在触摸屏上显示的效果。

我尤其喜欢的一件事是，当你在浏览小屏幕网站，主导航填满整屏的时候，使用页面锚点可以跳到你感兴趣的内容上面。这块功能区出现在页面的头部，可以有效的帮助用户不必为看到主要内容，而必须向下不断的滚动。

Media Queryies

Mediaqueri.es是一个很棒的网站，主要用于展示众多的网站在屏幕不一的设备上的显示情况。

响应式设计灵活的关键因素在于流体布局宽度。你需要做的所有就是，创建一个包裹元素，内容元素和列元素的宽度，用以适应不同的设备宽度。这个并不是新东西，然而这一点在现在是比以往更重要的。为了简单起见，我将给你展示如何创建一个流式布局的页面，这个页面是由导航，banner图片和两列组成，他们将考虑在各种尺寸设备的布局。你将会注意到我包含了一个respond.min.js的文件，这个是轻量级的插件，可以在ie6-8上面使用媒体查询。下面是基础的html结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title> Demo | Responsive Web</title>
  <meta name="viewport" content="width=device-width, minimumscale=
1.0, maximum-scale=1.0" />
   <link href="styles/main.css" type="text/css" rel="stylesheet">
   <!--[if lt IE 9]>
     <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
   <script type='text/javascript' src='scripts/respond.min.js'></script>
</head>
<body>
  <div id="wrapper">
    <header>
      <nav id="skipTo">
        <ul>
          <li>
            <a href="#main" title="Skip to Main Content">Skip to Main Content</a>
          </li>
        </ul>
      </nav>
      <h1>Demo</h1>
      <nav>
        <ul>
          <li><a href="#" title="Home">Home</a></li>
          <li><a href="#" title="About">About</a></li>
          <li><a href="#" title="Work">Work</a></li>
          <li><a href="#" title="Contact">Contact</a></li>
         </ul>
      </nav>
      <div id="banner">
        <img src="images/kaws.jpg" alt="banner" />
      </div>
    </header>
    <section id="main">
      <h1>Main section</h1>
      <p>Lorem…p>
    </section>
    <aside>
      <h1>Sub-section</h1>
      <p>Lorem …p>
    </aside>
  </div>
</body>
</html>

当涉及到css，设置最大宽度是有效阻止，网站页面在超大屏幕上面无限扩展显示，这个对缩小页面不会有影响。当从固定宽度改为流式宽度，面临的一个主要问题是图片的显示尺寸。而这个问题在css中有个简单的解决方法，就是只需要设置图片的宽度是100%。

/* Structure */
#wrapper {
  width: 96%;
  max-width: 920px;
  margin: auto;
  padding: 2%;
}
#main {
  width: 60%;
  margin-right: 5%;
  float: left;
}
aside {
  width: 35%;
  float: right;
}
/* Logo H1 */
header h1 {
  height: 70px;
  width: 160px;
  float: left;
  display: block;
  background: url(../images/demo.gif) 0 0 no-repeat;
  text-indent: -9999px;
}
/* Nav */
header nav {
  float: right;
  margin-top: 40px;
}
header nav li {
  display: inline;
  margin-left: 15px;
}
#skipTo {
  display: none;
}
#skipTo li {
  background: #b1fffc;
}
/* Banner */
#banner {
  float: left;
  margin-bottom: 15px;
  width: 100%;
}
#banner img {
  width: 100%;
}

现在你的图片将按照他的父元素宽度显示，并根据他的宽度变化而变化。只需要确保图片的最大宽度，不超过包含他的容器的最大宽度，否则他就可能显示在外面。使用这个办法要记住一点，就是你的图片要足够大，以适应最大的浏览设备尺寸。

Responsive DEMO

使用大图片会影响加载时间，所以在小设备上面大图片是不需要的，这就需要一个方法，检查用户设备屏幕的尺寸，根据这个尺寸选择显示大图还是小图。然而使用这个方法仍旧是个不小的挑战，不过可以考虑一下。Mat Marquis，是一个jquery mobile团队的一个成员，他写了一篇很好的文章，就是关于这个方法的，其中阐述了这个方法的利弊。

主导航的改变

这样改变导航的主要原因是比例的缩放，使得可读性降低并且难以点击。使用这种方法，你可以让用户更方便的访问他。你也许注意到代码中的一些改变，main和aside区域显示也不同了，因为他们从两列变成了一列显示。

/* Media Queries */
@media screen and (max-width: 480px) {
  #skipTo {
    display: block;
  }
  header nav, #main, aside {
    float: left;
    clear: left;
    margin: 0 0 10px;
    width: 100%;
  }
  header nav li {
    margin: 0;
    background: #efefef;
    display: block;
    margin-bottom: 3px;
  }
  header nav a {
    display: block;
    padding: 10px;
    text-align: center;
  }
}

你可能注意到在一些移动设备，你的网站就自动瘦身以适应屏幕大小，这时我们就面临了一个问题是，必须放大浏览的内容。

想让你的媒体查询完全起作用，使得你的网站像一个真正的移动网站，就应该包含类似下面这些规则：

宽度属性控制屏幕显示的大小。它可以设置一个特定的像素宽度如960，或是设备宽度，也就是屏幕像素100%的。初始尺寸属性用于用户的首次加载页面。最大最小范围，用户可伸缩属性控制用户放大缩小页面。

Responsive DEMO

正如我前面所说，响应式布局从来没有针对移动设备搭建网站，他是为了适应设备尺寸调整布局。一个响应式网站适应不同的设备，应该作为一个默认的情况。如果你想创建一个移动版本，为了看起来完全不同，只是为了显示最重要的内容，那么至少让用户可以看到整个网站。我们应该关注如何使用在运用响应式这个技术的前提下，创建一个更好的网站。

流式布局给予我们很大的帮助，而且我很兴奋的地方是，流式布局模块。众所周知，flexbox，提供了一个方法，就是在不需要计算宽高值，就可以在父元素内部自动调整子元素的尺寸。动态修改一个元素的尺寸，flexbox也给一个父元素提供了一些属性，用于控制空白的分布。如果你对于flexbox还不了解的话，你可以去看一下 Peter Gasston的文章。

开发人员必须考虑到，让每个人看到用相同的组织方式显示的相同内容。作为开发人员我们应该设定我们的最低标准，为每个人在任何地方，都看到同一个网站。

这篇教程已收到了来自Stephanie Rieger技术审查。

译者手语：初次翻译前端技术博文，整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

如需转载烦请注明出处：

英文原文：http://www.netmagazine.com/tutorials/build-basic-responsive-site-css

中文译文：http://www.w3cplus.com/css3/build-basic-responsive-site-css.html

返回顶部