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

编辑推荐: 掘金是一个高质量的技术社区,从 CSS 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。 点击链接查看最新前端内容,或到各大应用市场搜索「 掘金」下载APP,技术干货尽在掌握中。

特别声明:此篇文章由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

返回顶部