blob: aa326758ce859f422c834b3098a58c01c72d2585 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
---
title: 响应式设计
slug: conflicting/Web/Progressive_web_apps
translation_of: Web/Progressive_web_apps
translation_of_original: Web/Guide/Responsive_design
original_slug: Web_Development/Mobile/Responsive_design
---
<p>在解决对桌面和移动环境开发网站这个问题上，与<a href="/en/Web_Development/Mobile/Separate_sites" title="en/Web development/Mobile/Separate sites">分离网站</a>的方法相反，一种相对较新（其实相当<a class="external" href="http://www.alistapart.com/articles/dao/">古老</a>）的方法渐渐流行起来：摒弃用户代理检测，而是在客户端根据浏览器的能力进行页面变化。这种方法最早是由Ethan Marcotte在他为<a class="external" href="http://www.alistapart.com/">A List Apart</a>所写的文章中提出的，也就是我们所熟知的<a class="external" href="http://www.alistapart.com/articles/responsive-web-design/">响应式设计</a>。和分离网站设计方式一样，响应式设计也有自己的优势和弊端。</p>
<h2 id="优势">优势</h2>
<p>尽管一开始这种方法并不是为了创建移动端网站而提出的，但在近一段时间以来，作为分离式移动端网站的替代者，响应式设计作为一种向移动端友好的方向迈进的方式而备受关注。</p>
<ol>
<li>因为无需为不同的设备维护不同的网站，这种方式节省了时间和金钱。</li>
<li>响应式设计为每一个页面提供了一个单独且独有的URL。</li>
<li>社会化分享统计（Facebook Likes, Tweets, +1 on Google plus）也不会割离开，因为移动端和桌面端使用的都是一个唯一的URL。</li>
<li>响应式设计无需考虑用户代理的检测。</li>
</ol>
<p>这一方法有着许多非常好的方面。因为其不需要进行用户代理检测，相比于分离式网站方法，响应式设计更加具有韧性并经得起未来发展的考验。</p>
<h2 id="弊端">弊端</h2>
<p>当然，这一方法并非没有其局限性。因为内容必须在客户端使用Javascript进行调整，所以变化的内容要尽可能的最少。一般来说，当你尝试编写两组不同的Javascript来操作同一个DOM时，事情就会变得很麻烦。这也是为什么网络应用往往不采用这种方法的一个很重要的原因。</p>
<p>如果你的网站还没有支持<a class="external" href="http://www.smashingmagazine.com/2008/06/26/flexible-layouts-challenge-for-the-future/">弹性布局</a>，那么将你的一个已有网站重新做响应式设计就必须重写你的样式。但是，这也有可能因祸得福。让你的网站成为响应式的设计，可能是一个升级和整理网站CSS的好机会。</p>
<p>最后，由于增加了脚本和样式的代码量，响应式的网站的性能可能会比分离式网站要差。尽管通过将脚本和样式进行合理的重构能够节省出一些资源，但性能的下降是无法避免的。</p>
<h2 id="何时选择响应式设计">何时选择响应式设计</h2>
<p><a href="/@api/deki/files/5894/=teixido_responsive-300x177.png" title="teixido_responsive-300x177.png"><img align="right" alt="teixido_responsive-300x177.png" class="internal rwrap" src="/@api/deki/files/5894/=teixido_responsive-300x177.png?size=webview" style="width: 300px; height: 177px;"></a>正如上面所提到的，因为内容的改变很困难，当你使用响应式设计的时候，你无法给予用户一个有着显著区别的移动端体验，除非你大幅地增加代码的复杂度。也就是说，如果网站的桌面端和移动端内容非常相似，那么响应式设计就是一个很好的选择。那些以文档为中心的网站，他们在不同的设备上的主要用途都不会改变，比如一个产品页面，对于这种网站响应式的设计就非常的适合。你会注意到下面的例子全都是博客和宣传页面！</p>
<h2 id="举例">举例</h2>
<p>尽管它还没有像分离式网站那么流行，但每天都有很多网站开始应用这项技术。幸运的是，因为所有的代码都是在客户端的，如果你想了解一个网站是如何实现这项技术的，只需要简单地访问该网站并查看他的页面源代码即可。下面是一些网站的例子：</p>
<ul>
<li><a class="external" href="http://teixido.co/">http://teixido.co/</a> – 我最喜欢的一个自适应设计，在上面也有图片展示！</li>
<li><a class="external" href="http://adactio.com/journal/1696">http://adactio.com/journal/1696</a> – 另一篇很好的文章，上面有各种例子的链接。</li>
<li><a class="external" href="http://thinkvitamin.com/">http://thinkvitamin.com/</a></li>
<li><a class="external" href="http://stephencaver.com/">http://stephencaver.com/</a></li>
<li><a class="external" href="http://hicksdesign.co.uk/">http://hicksdesign.co.uk/</a></li>
</ul>
<p>尽管是一个相对较新的方法，响应式设计也逐渐积累了许多良好的经验。如果你正打算设计一个响应式网站，通常值得<a class="external" href="http://www.lukew.com/ff/entry.asp?1117">先创建一个小屏幕的设计</a>，使得移动端的限制因素在一开始设计的时候就被考虑到。并且，这样更利于为你的样式使用渐进增强的技术，而不是使用Media Queries来隐藏已有网站中的元素。这样的话，那些老的不支持Media Queries的浏览器依旧能显示正确的布局。根据这一方法来设计的出色示范可以看<a class="external" href="http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu">这里</a>。</p>
<h2 id="开发移动网站的途径">开发移动网站的途径</h2>
<p>想了解移动平台开发的相关背景和其他方法，请参看以下文章。</p>
<ul>
<li><a href="/en/Web_Development/Mobile/Mobile-friendliness" title="XML Web Services">友好型移动设计是什么概念?</a></li>
<li><a href="/en/Web_Development/Mobile/Separate_sites" title="en/Web development/Mobile/Hybrid approach">独立网站</a></li>
<li><a href="/en/Web_development/Mobile/A_hybrid_approach" title="en/Web development/Mobile/Hybrid approach">复合方法</a></li>
<li><a href="/en/docs/Web/Apps/app_layout/Responsive_design_versus_adaptive_design" title="en/Web development/Mobile/Hybrid approach">响应式设计 VS. 自适应设计</a></li>
</ul>
<h2 id="参考">参考</h2>
<ul>
<li>其他<a href="/en/Web_Development/Responsive_Web_design" title="Responsive Web design">自适应网站设计</a>相关资料</li>
</ul>
<div class="originaldocinfo">
<font face="Georgia, Times, Times New Roman, serif" size="3"><b>原稿信息</b></font><br>
<p>Originally published on 27 May, 2011 on the Mozilla Webdev blog as "<a class="external" href="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/" title="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/">Approaches to Mobile Web Development Part 3 - Responsive Design</a>", by Jason Grlicky.</p>
</div>
<p> </p>
|
