Be For Web - 语义化 http://www.beforweb.com/taxonomy/term/18 en Foundation框架 - 快速创建跨平台的网站页面原型 http://www.beforweb.com/node/23 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-foundation-prototype-framework-responsive-multiple-device.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>整个一周都在揪心的猫事中度过。从十月底到现在的这段日子里,倒是越发懂得珍惜每天中片刻的宁静时光。有时会怀疑家里是否有时空漩涡一类的东西,不然钟表怎么会走的那么快,一点儿也不愿停下等等我的样子。一切都会好起来。</p> <p>独白终了,进入正题。最近两篇译文都有涉及框架和跨平台方面的话题:前一篇中,我们了解了一些<a href="/node/22">用于移动应用开发的前端框架工具</a>;今天这篇的立足点偏向设计开发流程的上游,它将向我们展示<strong class="ePoint">怎样使用Foundation</strong><strong class="ePoint">框架</strong><strong class="ePoint">快速创建跨平台的、可以在多种设备上进行测试的响应式页面原型</strong>。下面开始正文部分。</p> <p>开门见山的说,作为网页设计和开发人员,我们面临着以下几个严峻的问题:</p> <ul> <li> 每天,人们用来上网的设备种类和数量都在不断上升。</li> <li> 为每种设备设计开发不同的界面是不可能的。</li> <li> 即使你专门为某些设备定制打造,这些设备也很有可能在不久的将来退出主流舞台。</li> </ul> <p>真心欢乐。别怕,大家一起面对并解决问题。其实,不同类型的设备及屏幕的这个问题,很早以前就开始存在了,只是多年来我们一直忽视这个状况,一厢情愿的守着960像素的网格系统<a class="eLink" href="http://beforweb.com">。</a></p> <!--break--><p>如今,我们需要从设计流程的上游改变长久以来的习惯,比如尝试快速创建可以在不同设备上进行测试的原型,而不只是针对台式机浏览器或笔记本。这就是我们(英文原文作者的团队)开发<a href="http://foundation.zurb.com/">Foundation</a>框架的原因。</p> <p>Foundation是一款开源的前端框架,我们可以使用它快速创建页面原型。相比于其他同类型工具,Foundation的移动化方案更加出色;借鉴响应式Web设计的思路和方法,Foundation对内容结构在不同类型设备中的的呈现方式进行了相应的预设。(关于响应式Web设计,可以参考我们之前的几篇文章,包括<a href="/node/6">响应式设计的概念、组成要素及基本实现思路</a>,<a href="/node/7">怎样通过CSS3 Media Query实现响应式Web设计</a>,以及相关的<a href="/node/21">产品需求和设计流程案例学习</a>)</p> <p>接下来,我们将通过一个完整的实例,来演示怎样使用Foundation快速创建跨平台的页面原型。走着!</p> <h3> 资源概览</h3> <p>首先到<a href="http://foundation.zurb.com">foundation.zurb.com</a>下载代码包;果断点击大蓝按钮即可。代码包中包含以下文件及结构:</p> <ul> <li> index.html - 我们将从这里开始创建第一个页面。</li> <li> javascripts和stylesheets路径 - 主要的静态资源文件,包括jQuery及所需的样式表。</li> <li> humans.txt和robots.txt - 里面的代码算是不错的样板,有空的时候可以溜几眼。</li> </ul> <p>JS方面的东西基本不在本文讨论范围,我们继续来看看stylesheets路径中的文件:</p> <ul> <li> global.css - 全局基础样式表,包括相对常规的12列固定宽度的网格系统、快速创建复杂布局的可嵌套工具等。另外还有其他全局字体、布局等方面的样式定义。</li> <li> ui.css - 用来对那些组成原型的常规UI元素进行样式定义。</li> <li> mobile.css - 负责移动设备方面的样式,涉及响应式的样式定义都在这里。</li> </ul> <p>分别在浏览器和代码编辑器中打开index.html文件。在浏览器中,我们可以看到该页面包含了一些用于构筑原型的基础布局结构及UI元素。</p> <p><a href="/sites/default/files/images/201111/foundation-prototype-framework-responsive-multiple-device.png" rel="lightbox"><img alt="foundation-prototype-framework-responsive-multiple-device" src="/sites/default/files/images/201111/foundation-prototype-framework-responsive-multiple-device.png" style="width: 500px; height: 383px; " /></a></p> <p>接下来,我们将从网格系统、快速创建原型、移动化这三个方面依次进行实例讲解。</p> <h3> 网格系统</h3> <p>首先来简单看看global.css中的网格系统。如果你熟悉<a href="http://960.gs/">960网格系统</a>或是<a href="http://blueprintcss.org/">Blueprint CSS框架</a>,那么对Foundation的网格结构也应该不会陌生。下面是一段典型的结构代码:</p> <pre class="brush:xml;"> &lt;div class=&quot;container&quot;&gt; &lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;eight columns&quot; id=&quot;mainContent&quot;&gt; ... &lt;/div&gt; &lt;div class=&quot;four columns&quot; id=&quot;sidebarContent&quot;&gt; ... &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</pre><p>该结构由三部分组成:外层容器container、行容器row和列容器columns。外层容器的作用只是为页面添加左右内边距(padding)。</p> <p>行容器拥有一个固定的最大宽度值,防止页面在大显示器中过宽;当然,如果你想打造纯粹的液态布局,也可以在样式表中去掉这个属性。</p> <p>列容器是最内层的内容容器,在我们的网格系统中,每行最多可以放置12个列容器<a class="eLink" href="http://beforweb.com">。</a>上面的代码中,我们创建的是典型的&ldquo;内容+侧边栏&rdquo;布局,宽度分别为全宽的2/3和1/3。</p> <p>网格布局可以进行嵌套:</p> <pre class="brush:xml;"> &lt;div class=&quot;container&quot;&gt; &lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;eight columns&quot;&gt; &lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;four columns&quot;&gt; ... &lt;/div&gt; &lt;div class=&quot;four columns&quot;&gt; ... &lt;/div&gt; &lt;div class=&quot;four columns&quot;&gt; ... &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;four columns&quot;&gt; ... &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</pre><p>Foundation官网中有一些<a href="http://foundation.zurb.com/grid.php">布局范例</a>可以参考。</p> <div class="embed"><article id="node-260" class="node node-related-books" about="/node/260" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/HTML5移动Web开发实战-石川/dp/B00CU5V1T2/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="响应式Web设计:HTML5和CSS3实战" src="http://beforweb.com/sites/default/files/images/products/03.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/HTML5移动Web开发实战-石川/dp/B00CU5V1T2/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">HTML5移动Web开发实战</a></h4> <p><a href="http://www.amazon.cn/HTML5移动Web开发实战-石川/dp/B00CU5V1T2/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书从移动Web、设备端配置和优化、交互、响应式设计、设备访问,调试、性能、富媒体等角度出发,包含了60多个实例,详细阐释了如何构建快速、响应式的HTML5移动网站,适用于iOS、Android、Windows Phone和BlackBerry等众多主流移动应用平台...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 快速创建原型</h3> <p>开始动手。我们要为一个简单的新闻资讯类网站制作首页和文章内页的原型;整个过程包括两部分:使用Foundation快速创建基础原型,以及为不同类型的设备进行移动化处理。首先来看第一部分。</p> <p>最好拿起纸和笔,在创建原型之前将构思勾画出来。下面是我们为基础版本的首页(桌面显示器版本)画的草图:</p> <p><a href="/sites/default/files/images/201111/foundation-prototype-framework-responsive-sketch.jpg" rel="lightbox"><img alt="foundation-prototype-framework-responsive-sketch" src="/sites/default/files/images/201111/foundation-prototype-framework-responsive-sketch.jpg" style="width: 500px; height: 539px; " /></a></p> <p>可以看到,首页的大致布局包括页头、主要文章内容图文、侧边的次级内容图文、特色文章图文列表。对这个页面,我们可以用到一些Foundation自带的布局结构,以及一个不错的外部服务。</p> <ul> <li> 页面整体布局方面,使用前面介绍过的网格系统。</li> <li> 全局主导航使用Foundation预设的tab结构。</li> <li> 对于每个图文单元中的图片,我们使用<a href="http://placehold.it/">placehold.it</a>提供的服务。它会按照指定的比例输出可以填满容器的示范内容,包括用来占位的图片,以及可以自定义的文案等。</li> </ul> <p>OK我们从页头开始。Foundation框架会保证旧浏览器兼容HTML5,所以我们在这里可以放心的使用更加语义化的header标签。因为页头是一个包含多列内容的块级结构,所以我们还要为它添加class=&quot;row&quot;。代码如下:</p> <pre class="brush:xml;"> &lt;div class=&quot;container&quot;&gt; &lt;header class=&quot;row&quot;&gt; &lt;div class=&quot;two columns&quot;&gt; &lt;img src=&quot;http://placehold.it/200x120&quot; /&gt; &lt;/div&gt; &lt;div class=&quot;eight columns&quot;&gt; &lt;h1 class=&quot;centered&quot;&gt;The Foundation Times&lt;/h1&gt; &lt;h5 class=&quot;centered&quot;&gt;December 1, 2011&lt;/h5&gt; &lt;/div&gt; &lt;div class=&quot;two columns&quot;&gt; &lt;img src=&quot;http://placehold.it/200x120&quot; /&gt; &lt;/div&gt; &lt;/header&gt;</pre><p>可以看到,在外部容器container中,我们将header作为完整的一行,其中放置了三列,宽度方面是1:4:1的关系。在第一列和第三列中,我们使用了placehold.it提供的占位图片,用来表示logo等元素。在第二列中,我们使用h1标签作为网站标题的容器,副标题则使用h5。</p> <p>接下来是导航。我们要使用Foundation预设的tab形式;代码结构如下:</p> <pre class="brush:xml;"> &lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;twelve columns&quot;&gt; &lt;dl class=&quot;tabs&quot;&gt; &lt;dd&gt;&lt;a href=&quot;#&quot; class=&quot;active&quot;&gt;All News&lt;/a&gt;&lt;/dd&gt; &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Llamas&lt;/a&gt;&lt;/dd&gt; &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Alpacas&lt;/a&gt;&lt;/dd&gt; &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Vicunas&lt;/a&gt;&lt;/dd&gt; &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Other Dromedaries&lt;/a&gt;&lt;/dd&gt; &lt;/dl&gt; &lt;/div&gt; &lt;/div&gt;</pre><p>虽然在这一行中只有一套导航元素,但是我们仍然需要将导航元素列表dl放置在一个列容器中,并且将这个列容器设置为12列全宽,否则布局将出现问题。</p> <p>对于页面其他部分的内容,基本方式是类似的,我们将会用到网格系统、一些基本的元素、以及Foundation自带的UI组件。下面是页面剩余部分的HTML代码:</p> <pre class="brush:xml;"> &lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;eight columns&quot;&gt; &lt;img src=&quot;http://placehold.it/800x340&quot; /&gt; &lt;h3&gt;&lt;a href=&quot;#&quot;&gt;Llamas: Great Pets or the Best Pets?&lt;/a&gt;&lt;/h3&gt; &lt;p&gt;Intrepid reporter Jordan Humphreys went to Happy Time Llama Farm to investigate: are llamas merely great pets, or he best pets? Read the full article to find out!&lt;/p&gt; &lt;a href=&quot;#&quot; class=&quot;small radius nice blue button&quot;&gt;Read More &amp;rarr;&lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;four columns&quot;&gt; &lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;five columns&quot;&gt; &lt;img src=&quot;http://placehold.it/120x100&quot; /&gt; &lt;/div&gt; &lt;div class=&quot;seven columns&quot;&gt; &lt;h5&gt;&lt;a href=&quot;&quot;&gt;Alpaca Farm Closed&lt;/a&gt;&lt;/h5&gt; &lt;p&gt;Anthony Tadina reports on this tragic closing.&lt;br /&gt;&lt;a href=&quot;#&quot;&gt;Read More &amp;rarr;&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; ... [repeat this row twice more] &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;twelve columns&quot;&gt; &lt;hr /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;three columns&quot;&gt; &lt;img src=&quot;http://placehold.it/260x190&quot; /&gt; &lt;h5&gt;&lt;a href=&quot;#&quot;&gt;Feature 1&lt;/a&gt;&lt;/h5&gt; &lt;p&gt;Description&lt;br /&gt;&lt;a href=&quot;#&quot;&gt;Read More &amp;rarr;&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; ... [repeat this column 3 more times] &lt;/div&gt; &lt;footer class=&quot;row&quot;&gt; &lt;div class=&quot;seven columns&quot;&gt; &lt;p&gt;&lt;strong&gt;The Foundation Times&lt;/strong&gt;&lt;br /&gt;&amp;copy; 2025 no rights reserved.&lt;/p&gt; &lt;/div&gt; &lt;div class=&quot;five columns&quot;&gt; &lt;p&gt;&lt;a href=&quot;#&quot;&gt;All News&lt;/a&gt; | &lt;a href=&quot;#&quot;&gt;Llamas&lt;/a&gt; | &lt;a href=&quot;#&quot;&gt;Alpacas&lt;/a&gt; | &lt;a href=&quot;#&quot;&gt;Vicunas&lt;/a&gt; | &lt;a href=&quot;#&quot;&gt;Other Dromedaries&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/footer&gt;</pre><p>我们可以看到,HTML原型中每个部分的代码结构其实都是相当基础和简单的。需要注意的是class中带有&ldquo;button&rdquo;的元素,这些是Foundation预设的按钮,包括几种不同的风格样式。我们可以用这样的方式将a标签或是button类型的input元素定义为风格化按钮,并通过&ldquo;small&rdquo;、&ldquo;radius&rdquo;等class为其设置具体的样式:</p> <ul> <li> <strong>small</strong>或<strong>large</strong> - 可选;控制按钮的尺寸;如果不做设置,默认将为中等尺寸。</li> <li> <strong>radius</strong> -&nbsp;可选;为按钮增加几像素的圆角效果。该值还可以是<strong>round</strong>,样式为左右两侧完全圆弧。不做设置时,默认样式是矩形。</li> <li> <strong>nice</strong> - 可选;添加少许高光等细节效果。</li> <li> <strong>blue</strong> - 可选;设置颜色;该值还可以是<strong>red</strong>、<strong>black</strong>、<strong>grey</strong>,或是在样式表中进行过自定义的任何名称。</li> <li> <strong>button</strong> - 唯一的必要class,用来将元素格式化为按钮。</li> </ul> <p>通过这样一些很基本的HTML代码,我们就已经创建好了基础版本的原型;当前的实际效果如下图所示。</p> <p><a href="/sites/default/files/images/201111/foundation-prototype-framework-homepage-basic.jpg" rel="lightbox"><img alt="foundation-prototype-framework-homepage-basic" src="/sites/default/files/images/201111/foundation-prototype-framework-homepage-basic.jpg" style="width: 500px; height: 359px; " /></a></p> <p>如果仅仅需要为桌面设备制作页面原型,那么到这里我们的任务就已经完成了。不过在本次实例中,我们还要演示怎样使原型针对不同类型移动设备进行响应式的兼容,实现跨平台<a class="eLink" href="http://beforweb.com">。</a></p> <div class="embed"><article id="node-271" class="node node-related-books" about="/node/271" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/众妙之门-移动Web设计精髓-德-Smashing-Magazine/dp/B00BUT6S92/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="众妙之门:移动Web设计精髓" src="http://beforweb.com/sites/default/files/images/products/15.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/众妙之门-移动Web设计精髓-德-Smashing-Magazine/dp/B00BUT6S92/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">众妙之门:移动Web设计精髓</a></h4> <p><a href="http://www.amazon.cn/众妙之门-移动Web设计精髓-德-Smashing-Magazine/dp/B00BUT6S92/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书内容涵盖移动Web开发的趋势、如何建立一个移动网站、iPhone和iPad的网络应用发展、应用开发的趋势和误区、iPad应用开发要点、如何制作移动Web应用、移动设备的形式、如何推销你的移动应用...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 移动化</h3> <p>用户使用移动设备访问网站时,期望会有所不同。对于眼前这个内容类网站,我们希望用户在使用移动设备进行访问的时候,可以在首屏直接看到主要内容部分。移动设备用户在浏览网页时,很厌恶的一点就是,在忍受了网站页头和全局导航的加载过程之后,仍然无法立刻看到主要内容。(关于在移动设备中,网站内容呈现方式的策略,可以参考我们之前关于<a href="/node/21">响应式网站产品需求及设计流程</a>方面的文章)</p> <p>在不做任何移动化处理之前,我们的原型在小屏幕移动设备中的呈现方式如下图所示:</p> <p><img alt="foundation-prototype-framework-mobile-iphone-default" src="/sites/default/files/images/201111/foundation-prototype-framework-mobile-iphone-default.jpg" style="width: 380px; height: 744px; " /></p> <p>首屏中,我们只能看到logo、网站标题等与主要内容、全局导航无关的元素。真心不靠谱。我们接下来要使用一些Foundation提供的的专门用来处理不同设备视图的class,让原型中某些元素在小屏幕移动设备中发生变化。</p> <p>当前,我们的基础版页面原型中,header部分的代码是这样的:</p> <pre class="brush:xml;"> &lt;header class=&quot;row&quot;&gt; &lt;div class=&quot;two columns&quot;&gt; &lt;img src=&quot;http://placehold.it/200x120&quot; /&gt; &lt;/div&gt; &lt;div class=&quot;eight columns&quot;&gt; &lt;h1 class=&quot;centered&quot;&gt;The Foundation Times&lt;/h1&gt; &lt;h5 class=&quot;centered&quot;&gt;December 1, 2011&lt;/h5&gt; &lt;/div&gt; &lt;div class=&quot;two columns&quot;&gt; &lt;img src=&quot;http://placehold.it/200x120&quot; /&gt; &lt;/div&gt; &lt;/header&gt;</pre><p>添加了移动化的class之后:</p> <pre class="brush:xml;"> &lt;header class=&quot;row hide-on-phones&quot;&gt; &lt;div class=&quot;two columns&quot;&gt; &lt;img src=&quot;http://placehold.it/200x120&quot; /&gt; &lt;/div&gt; &lt;div class=&quot;eight columns&quot;&gt; &lt;h1 class=&quot;centered&quot;&gt;The Foundation Times&lt;/h1&gt; &lt;h5 class=&quot;centered&quot;&gt;December 1, 2011&lt;/h5&gt; &lt;/div&gt; &lt;div class=&quot;two columns&quot;&gt; &lt;img src=&quot;http://placehold.it/200x120&quot; /&gt; &lt;/div&gt; &lt;/header&gt; &lt;header class=&quot;row show-on-phones&quot;&gt; &lt;div class=&quot;twelve columns&quot;&gt; &lt;img src=&quot;http://placehold.it/480x100&quot; /&gt; &lt;h1 class=&quot;centered&quot;&gt;The Foundation Times&lt;/h1&gt; &lt;h5 class=&quot;centered&quot;&gt;December 1, 2011&lt;/h5&gt; &lt;/div&gt; &lt;/header&gt;</pre><p>重点在于两个新的class,一个是<strong>hide-on-phones</strong>,另外一个是<strong>show-on-phones</strong>。顾名思义,它们用来控制元素在手机设备上的显示和隐藏。Foundation预设了一些这样的class,用来根据不同类型的设备,响应式的调整页面元素的呈现方式。</p> <p>现在,当使用手机浏览页面原型时,只有第二个简化的header会显示出来。接下来,我们为这个移动版本的header写几行样式:</p> <pre class="brush:css;"> h1.centered { text-align: center; margin-bottom: 0; } h5.centered { text-align: center; } .show-on-phones h1.centered { font-size: 24px; font-size: 2.4rem; } .show-on-phones h5.centered { font-size: 12px; font-size: 1.2rem; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #ddd; }</pre><p>来看看到目前的成果:</p> <p><img alt="foundation-prototype-framework-mobile-iphone-header" src="/sites/default/files/images/201111/foundation-prototype-framework-mobile-iphone-header.jpg" style="width: 380px; height: 744px; " /></p> <p>好多了。现在的问题是,导航项在小屏幕中显得太多了,布局发生了错乱。一个常见的解决方案是,对手机设备,将导航移至页面底部。当然,我们并不是要真的移动它,而是像前面那样设置不同的显示规则。对于目前的全局导航,在class中增加一个hide-on-phones:</p> <pre class="brush:xml;"> &lt;div class=&quot;row hide-on-phones&quot;&gt; &lt;div class=&quot;twelve columns&quot;&gt; &lt;dl class=&quot;tabs&quot;&gt; &lt;dd&gt;&lt;a href=&quot;#&quot; class=&quot;active&quot;&gt;All News&lt;/a&gt;&lt;/dd&gt; &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Llamas&lt;/a&gt;&lt;/dd&gt; &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Alpacas&lt;/a&gt;&lt;/dd&gt; &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Vicunas&lt;/a&gt;&lt;/dd&gt; &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Other Dromedaries&lt;/a&gt;&lt;/dd&gt; &lt;/dl&gt; &lt;/div&gt; &lt;/div&gt;</pre><p>接下来,在页面底部,footer之前,添加一个新的导航;HTML结构与头部的全局导航基本一致:</p> <pre class="brush:xml;"> &lt;div class=&quot;row show-on-phones&quot;&gt; &lt;div class=&quot;twelve columns&quot;&gt; &lt;dl class=&quot;tabs mobile&quot;&gt; &lt;dd&gt;&lt;a href=&quot;#&quot; class=&quot;active&quot;&gt;All News&lt;/a&gt;&lt;/dd&gt; &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Llamas&lt;/a&gt;&lt;/dd&gt; &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Alpacas&lt;/a&gt;&lt;/dd&gt; &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Vicunas&lt;/a&gt;&lt;/dd&gt; &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Other Dromedaries&lt;/a&gt;&lt;/dd&gt; &lt;/dl&gt; &lt;/div&gt; &lt;/div&gt;</pre><p>区别在于两点:一是在容器的class中使用了show-on-phones,使该导航只在手机中显示;另外,在导航列表的class里增加了一个&ldquo;<strong>mobile</strong>&rdquo;,这样可以使每个导航tab都成为全宽,整个导航将成为一个纵向列表<a class="eLink" href="http://beforweb.com">。</a></p> <p>现在,我们的原型在手机中的首屏效果是这样的:</p> <p><img alt="foundation-prototype-framework-mobile-iphone-content" src="/sites/default/files/images/201111/foundation-prototype-framework-mobile-iphone-content.jpg" style="width: 380px; height: 744px; " /></p> <p>基于网格系统,编写了少量的高语义化HTML代码,配合Foundation原生提供的一些样式工具class,我们已经创建出了可以用来进行跨平台演示和测试的首页原型。</p> <div class="embed"><article id="node-292" class="node node-related-books" about="/node/292" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/深入浅出Mobile-Web-加德纳/dp/B00DGM8I9Y/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="深入浅出Mobile Web(中文版)" src="http://beforweb.com/sites/default/files/images/products/37.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/深入浅出Mobile-Web-加德纳/dp/B00DGM8I9Y/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">深入浅出Mobile Web(中文版)</a></h4> <p><a href="http://www.amazon.cn/深入浅出Mobile-Web-加德纳/dp/B00DGM8I9Y/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书会告诉你如何使用你熟悉的Web技术建立网站和应用,可以在各种任意大小的设备上工作。把你的HTML、Javascript和CSS技术派上用场,然后优化你的网站,让它在要求很高的移动市场中有最出色的表现...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 自己试试看</h3> <p>接下来,你可以按照我们前面的方法,自己试着为文章内页创建原型。同样,从手绘草稿开始。我们已经帮你完成了这一步,并添加了一些注释,作为编写原型代码时的小提示;见下图:</p> <p><a href="/sites/default/files/images/201111/foundation-prototype-framework-responsive-sketch-article-page.jpg" rel="lightbox"><img alt="foundation-prototype-framework-responsive-sketch-article-page" src="/sites/default/files/images/201111/foundation-prototype-framework-responsive-sketch-article-page.jpg" style="width: 500px; height: 564px; " /></a></p> <p>你可以<a href="http://mos.netmagazine.com/site/files/tutorials/assets/2011/11/computerarts-quickly-build-a-prototype-to-test-on-any-device.zip">下载这套实例的源文件包</a>,实际看看这些原型相关文件(包括文章内页)的完整代码。</p> <h3> 跨平台原型在项目实践中能起到怎样的作用?</h3> <p>正如我们在本文开头提到的,要使网站在任何类型的设备上都尽量兼容,最好的办法就是从设计流程的上游出发,创建跨平台性比较强的原型,确保从一开始就可以对布局结构等方面的设计方案进行及时检验<a class="eLink" href="http://beforweb.com">。</a>设计方面的迭代不能再仅仅依靠Photoshop了。</p> <p>最近,我们在一个为本地某公益组织创建网站的实际项目中,运用这样的方式,进行了24小时冲刺式的设计开发。在勾画出网站页面的草图之后,我们使用Foundation框架,在不到两个小时的时间里,为所有的页面创建了原型。这些原型可以帮助我们在多种设备平台中直接测试相应的设计方案,同时,前端人员能够基于这些原型的代码结构并行式的展开相关开发工作,内容团队也可以基于可视化的原型策划文案;在这期间,我们也同时进行着视觉设计方面的工作。</p> <p>有兴趣的话,可以<a href="http://www.zurb.net/zurbwired2011/projects/zurbwired2011/">查看关于这次项目的更多细节</a>,包括<a href="http://www.zurb.net/zurbwired2011/projects/zurbwired2011/frame/lowfi-wireframes.php">全部页面的草图</a>、<a href="http://www.zurb.net/zurbwired2011/projects/zurbwired2011/frame/prototype/public/">跨平台原型</a>等。</p> <p>到目前为止,我们已经在很多客户项目案例中使用了Foundation框架;在我们自己的一些应用类型网站的设计开发过程中也有用到,包括<a href="http://www.axeapp.com/" rel="nofollow">axeapp.com</a>,<a href="http://www.spurapp.com/" rel="nofollow">spurapp.com</a>和<a href="http://www.reelapp.com/" rel="nofollow">reelapp.com</a>。</p> <div class="embed"><article id="node-284" class="node node-related-books" about="/node/284" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/移动Web实现指南-面向移动设备的网站优化-开发和设计-莱昂/dp/B008LWRNE0/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852823&amp;sr=8-18&amp;tag=c7210-23"><img alt="移动Web实现指南:面向移动设备的网站优化、开发和设计" src="http://beforweb.com/sites/default/files/images/products/29.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/移动Web实现指南-面向移动设备的网站优化-开发和设计-莱昂/dp/B008LWRNE0/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852823&amp;sr=8-18&amp;tag=c7210-23">移动Web实现指南:面向移动设备的网站优化、开发和设计</a></h4> <p><a href="http://www.amazon.cn/移动Web实现指南-面向移动设备的网站优化-开发和设计-莱昂/dp/B008LWRNE0/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852823&amp;sr=8-18&amp;tag=c7210-23">全书介绍了移动化规划、移动化设计和相应的编码技巧,特别适用于那些最初是为桌面电脑展示而设计的网站。书中的建议和实例,也是根据在优化这些网站的过程中所遇到的不同挑战来组织的...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li><li class="front-end taxonomy-term-reference-1"><a href="/front-end" typeof="skos:Concept" property="rdfs:label skos:prefLabel">前端</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/10" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动设备</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/62" typeof="skos:Concept" property="rdfs:label skos:prefLabel">框架</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/17" typeof="skos:Concept" property="rdfs:label skos:prefLabel">HTML5</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/63" typeof="skos:Concept" property="rdfs:label skos:prefLabel">网格系统</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/46" typeof="skos:Concept" property="rdfs:label skos:prefLabel">网站移动化</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/7" typeof="skos:Concept" property="rdfs:label skos:prefLabel">响应式Web设计</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/18" typeof="skos:Concept" property="rdfs:label skos:prefLabel">语义化</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/64" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原型</a></li></ul> Sat, 19 Nov 2011 02:07:16 +0000 C7210 23 at http://www.beforweb.com http://www.beforweb.com/node/23#comments 通过CSS3 Media Query实现响应式Web设计 http://www.beforweb.com/node/7 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-css3-media-query-responsive-web-design.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>十一长假已然过去了一大半。今天倒真是晴朗的不行,向窗外望去几乎可以看到阳光穿过凉爽的空气一缕缕洒落下来的样子。自从不再是学生,对每年的几次长假就无比珍惜,想方设法让每一天都尽量过的饱满一些;夜里闭上眼,满脑子就都是Drupal、博客、咖啡、使命召唤、南方公园...也许需要出门走一走了。</p> <p>OK开始说正经的了。在之前一篇译文中,我们了解了<a href="/node/6">响应式Web设计的概念、组成要素以及基本的实现思路</a>。今天继续相关话题,我们将从前文介绍过的&ldquo;<a href="http://beforweb.com/node/6/page/0/2">弹性布局结构</a>&rdquo;这方面出发,通过一个具体的实例来深入学习。</p> <p>如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大。除了使用传统的台式机,用户会越来越多的通过手机、上网本、iPad一类的平板设备来浏览页面。这种情况下,固定宽度的设计方案将会显得越发不合理。页面需要有更好的适应性,其布局结构要做到根据不同的设备及屏幕分辨率进行响应调整。接下来,我们将了解一下怎样通过HTML5和CSS3 Media Queries(媒介查询)相关技术来实现跨设备跨浏览器的响应式Web设计方案<a class="eLink" href="http://beforweb.com">。</a></p> <!--break--><h3> 范例效果预览</h3> <p>首先,我们来看看本篇范例的<a href="http://webdesignerwall.com/demo/adaptive-design/final.html" rel="nofollow">最终效果演示</a>。打开该页面,拖拽浏览器边框,将窗口慢慢缩小,同时观察页面结构及元素布局是怎样基于宽度变化而自动响应调整的。</p> <p><img alt="html5-css3-responsive-web-design-final-demo" src="/sites/default/files/images/201110/html5-css3-responsive-web-design-final-demo.jpg" /></p> <h4> 更多范例</h4> <p>我(原文作者)使用media query的方式设计了一些<a href="http://themify.me/" rel="nofollow">WordPress模板</a>,比如<a href="http://themify.me/themes/tisa" rel="nofollow">Tisa</a>、<a href="http://themify.me/themes/elemin" rel="nofollow">Elemin</a>、<a href="http://themify.me/themes/suco" rel="nofollow">Suco</a>、<a href="http://themify.me/themes/itheme2" rel="nofollow">iTheme2</a>、<a href="http://themify.me/themes/funki" rel="nofollow">Funki</a>、<a href="http://themify.me/themes/minblr" rel="nofollow">Minblr</a>和<a href="http://themify.me/themes/wumblr" rel="nofollow">Wumblr</a>等。</p> <h3> 概述</h3> <p>我们将范例页面的父级容器宽度设置为固定的980px,对于桌面浏览环境,该宽度适用于任何宽于1024像素的分辨率。我们通过media query来监测那些宽度小于980px的设备分辨率,并将页面的宽度设置由&ldquo;固定&rdquo;方式改为&ldquo;液态&rdquo;,布局元素的宽度随着浏览器窗口的尺寸变化进行调整。当可视部分的宽度进一步减小到650px以下时,主要内容部分的容器宽度会增大至全屏,而侧边栏将被置于主内容部分的下方,整个页面变为单栏布局。</p> <p><img alt="html5-css3-responsive-web-design-design-overview" src="/sites/default/files/images/201110/html5-css3-responsive-web-design-design-overview.jpg" style="width: 560px; height: 250px; " /></p> <h3> HTML代码</h3> <p>我们将把注意力集中在页面的主要布局方面,并使用HTML5标签来更加语义化的实现这些结构,包括页头、主要内容部分、侧边栏和页脚:</p> <pre class="brush:xml;"> &lt;div id=&quot;pagewrap&quot;&gt; &lt;header id=&quot;header&quot;&gt; &lt;hgroup&gt; &lt;h1 id=&quot;site-logo&quot;&gt;Demo&lt;/h1&gt; &lt;h2 id=&quot;site-description&quot;&gt;Site Description&lt;/h2&gt; &lt;/hgroup&gt; &lt;nav&gt; &lt;ul id=&quot;main-nav&quot;&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;form id=&quot;searchform&quot;&gt; &lt;input type=&quot;search&quot;&gt; &lt;/form&gt; &lt;/header&gt; &lt;div id=&quot;content&quot;&gt; &lt;article class=&quot;post&quot;&gt; blog post &lt;/article&gt; &lt;/div&gt; &lt;aside id=&quot;sidebar&quot;&gt; &lt;section class=&quot;widget&quot;&gt; widget &lt;/section&gt; &lt;/aside&gt; &lt;footer id=&quot;footer&quot;&gt; footer &lt;/footer&gt; &lt;/div&gt;</pre><h4> HTML5.js</h4> <p>IE是永恒的话题;对于我们使用的HTML5标签,IE9之前的版本无法提供支持。目前的最佳解决方案仍是通过html5.js来帮助这些旧版本的IE浏览器创建HTML5元素节点。在我们的页面HTML代码中调用该JS文件:</p> <pre class="brush:xml;"> &lt;!--[if lt IE 9]&gt; &lt;script src=&quot;http://html5shim.googlecode.com/svn/trunk/html5.js&quot;&gt;&lt;/script&gt; &lt;![endif]--&gt;</pre><div class="embed"><article id="node-260" class="node node-related-books" about="/node/260" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/HTML5移动Web开发实战-石川/dp/B00CU5V1T2/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="响应式Web设计:HTML5和CSS3实战" src="http://beforweb.com/sites/default/files/images/products/03.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/HTML5移动Web开发实战-石川/dp/B00CU5V1T2/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">HTML5移动Web开发实战</a></h4> <p><a href="http://www.amazon.cn/HTML5移动Web开发实战-石川/dp/B00CU5V1T2/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书从移动Web、设备端配置和优化、交互、响应式设计、设备访问,调试、性能、富媒体等角度出发,包含了60多个实例,详细阐释了如何构建快速、响应式的HTML5移动网站,适用于iOS、Android、Windows Phone和BlackBerry等众多主流移动应用平台...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> CSS</h3> <h4> HTML5块级元素样式</h4> <p>首先仍是浏览器兼容问题。虽然我们已经可以在低版本的IE中创建HTML5元素节点,但还是需要在样式方面做些工作,将这些&ldquo;新&rdquo;元素声明为块级:</p> <pre class="brush:css;"> article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }</pre><h4> 主要结构的CSS</h4> <p>忽略细节,我们仍是将注意力集中在大问题上。正如在前文&ldquo;概述&rdquo;中提到的,默认情况下页面容器的固定宽度为980像素,页头部分(header)的固定高度为160像素;主要内容部分(content)的宽度为600像素,左浮动;侧边栏(sidebar)右浮动,宽度为280像素。</p> <pre class="brush:css;"> #pagewrap { width: 980px; margin: 0 auto; } #header { height: 160px; } #content { width: 600px; float: left; } #sidebar { width: 280px; float: right; } #footer { clear: both; }</pre><h4> 截至目前的效果演示</h4> <p>目前我们只是初步完成了页面结构的HTML和默认结构样式,当然,并不包括那些与话题无关的细节实现问题。正如可以在<a href="http://webdesignerwall.com/demo/adaptive-design/demo-step1.html">目前的演示</a>中看到的,由于还没有做任何media query方面的工作,页面还不能随着浏览器尺寸的变化而改变布局<a class="eLink" href="http://beforweb.com">。</a></p> <h3> CSS3 Media Query</h3> <p>终于开始说正事儿了。首先我们需要在页面中调用<a href="http://code.google.com/p/css3-mediaqueries-js/">css3-mediaqueries.js</a>文件,来帮助IE8或是之前的版本支持CSS3 media queries:</p> <pre class="brush:xml;"> &lt;!--[if lt IE 9]&gt; &lt;script src=&quot;http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js&quot;&gt;&lt;/script&gt; &lt;![endif]--&gt;</pre><p>接下来,我们要创建CSS样式表,并在页面中调用:</p> <pre class="brush:xml;"> &lt;link href=&quot;media-queries.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;</pre><h4> 当浏览器可视部分宽度大于650px小于980px时(液态布局)</h4> <ul> <li> 将pagewrap的宽度设置为95%</li> <li> 将content的宽度设置为60%</li> <li> 将sidebar的宽度设置为30%</li> </ul> <pre class="brush:css;"> @media screen and (max-width: 980px) { #pagewrap { width: 95%; } #content { width: 60%; padding: 3% 4%; } #sidebar { width: 30%; } #sidebar .widget { padding: 8% 7%; margin-bottom: 10px; } }</pre><h4> 当浏览器可视部分宽度小于650px时(单栏布局)</h4> <ul> <li> 将header的高度设置为auto</li> <li> 将searchform绝对定位在top 5px的位置</li> <li> 将main-nav、site-logo、site-description的定位设置为static</li> <li> 将content的宽度设置为auto(主要内容部分的宽度将扩展至满屏),并取消float设置</li> <li> 将sidebar的宽度设置为100%,并取消float设置</li> </ul> <pre class="brush:css;"> @media screen and (max-width: 650px) { #header { height: auto; } #searchform { position: absolute; top: 5px; right: 0; } #main-nav { position: static; } #site-logo { margin: 15px 100px 5px 0; position: static; } #site-description { margin: 0 0 15px; position: static; } #content { width: auto; float: none; margin: 20px 0; } #sidebar { width: 100%; float: none; margin: 0; } }</pre><h4> 当浏览器可视部分宽度小于480px时</h4> <p>480px也就是iPhone横屏时的宽度。当可视部分的宽度小于该数值时,我们需要做以下调整:</p> <ul> <li> 禁用html节点的字号自动调整。默认情况下,iPhone会将过小的字号放大,我们可以通过-webkit-text-size-adjust属性进行调整。</li> <li> 将main-nav中的字号设置为90%</li> </ul> <pre class="brush:css;"> @media screen and (max-width: 480px) { html { -webkit-text-size-adjust: none; } #main-nav a { font-size: 90%; padding: 10px 8px; } }</pre><h3> 弹性图片</h3> <p>我们需要为图片设置max-width: 100%和height: auto,来实现其弹性化。对于IE,仍然需要一点额外的工作:</p> <pre class="brush:css;"> img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ }</pre><h3> 弹性内嵌视频</h3> <p>同样的,对于视频,我们也需要做max-width: 100%的设置;但是Safari对embed的该属性支持不是很给力,所以我们以width: 100%来代替:</p> <pre class="brush:css;"> .video embed, .video object, .video iframe { width: 100%; height: auto; }</pre><h3> iPhone中的初始化缩放</h3> <p>默认情况下,iPhone中的Safari浏览器会对页面进行自动缩放,以适应屏幕尺寸。我们可以使用以下的meta设置,将设备的默认宽度作为页面在Safari的可视部分宽度,并禁止初始化缩放。</p> <pre class="brush:xml;"> &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0&quot;&gt;</pre><h3> 最终效果演示</h3> <p>该范例的最终演示正像我们在本文开始时看到的那样;另外记得,在条件允许的情况下,使用各种典型移动设备(iPhone、iPad、Android、Blackberry等)来检验页面的移动版本<a class="eLink" href="http://beforweb.com">。</a></p> <p><img alt="html5-css3-responsive-web-design-final-demo" src="/sites/default/files/images/201110/html5-css3-responsive-web-design-final-demo.jpg" style="width: 560px; height: 395px; " /></p> <h3> 要点总结</h3> <h4> Media Query JavaScript</h4> <p>对于那些尚不支持media query的浏览器,我们要在页面中调用css3-mediaqueries.js</p> <pre class="brush:xml;"> &lt;!--[if lt IE 9]&gt; &lt;script src=&quot;http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js&quot;&gt;&lt;/script&gt; &lt;![endif]--&gt;</pre><h4> CSS Media Queries</h4> <p>实现自适应页面设计的关键之一,就是使用CSS根据分辨率宽度的变化来调整页面布局结构。</p> <pre class="brush:css;"> @media screen and (max-width: 560px) { #content { width: auto; float: none; } #sidebar { width: 100%; float: none; } }</pre><h4> 弹性图片</h4> <p>通过max-width: 100%和height: auto实现图片的弹性化。</p> <pre class="brush:css;"> img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ }</pre><h4> 弹性内嵌元素(视频)</h4> <p>通过width: 100%和height: auto实现内嵌元素的弹性化。</p> <pre class="brush:css;"> .video embed, .video object, .video iframe { width: 100%; height: auto; }</pre><h4> 字号自动调整的问题</h4> <p>通过-webkit-text-size-adjust:none禁用iPhone中Safari的字号自动调整</p> <pre class="brush:css;"> html { -webkit-text-size-adjust: none; }</pre><h4> 页面宽度缩放的问题</h4> <pre class="brush:xml;"> &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0&quot;&gt;</pre><div class="embed"><article id="node-258" class="node node-related-books" about="/node/258" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/响应式Web设计-HTML5和CSS3实战-Ben-Frain/dp/B00AH83HUK/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="响应式Web设计:HTML5和CSS3实战" src="http://beforweb.com/sites/default/files/images/products/01.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/响应式Web设计-HTML5和CSS3实战-Ben-Frain/dp/B00AH83HUK/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">响应式Web设计:HTML5和CSS3实战</a></h4> <p><a href="http://www.amazon.cn/响应式Web设计-HTML5和CSS3实战-Ben-Frain/dp/B00AH83HUK/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书将当前Web设计中热门的响应式设计技术与HTML5和CSS3结合起来,为读者全面深入地讲解了针对各种屏幕大小进行设计和开发现代网站的各种技术,包括媒体查询、流式布局、相对字体、响应式媒体等...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <div class="embed"><article id="node-270" class="node node-related-books" about="/node/270" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/iOS-Web应用开发-运用HTML5-CSS3与JavaScript-皮基/dp/B00E88LV0S/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iOS Web应用开发:运用HTML5、CSS3与JavaScript" src="http://beforweb.com/sites/default/files/images/products/14.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/iOS-Web应用开发-运用HTML5-CSS3与JavaScript-皮基/dp/B00E88LV0S/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iOS Web应用开发:运用HTML5、CSS3与JavaScript</a></h4> <p><a href="http://www.amazon.cn/iOS-Web应用开发-运用HTML5-CSS3与JavaScript-皮基/dp/B00E88LV0S/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书重点是使用HTML5、CSS3 及JavaScript等Web标准来为iOS做设计与开发,主题围绕为Apple移动设备设计界面和开发应用的完整流程而展开。读者除了能从中学习相关Web标准、专有技术、工具以及一切有助于设计和开发的东西,还能亲身体验适用于所有面向移动项目的真实工作流程...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li><li class="front-end taxonomy-term-reference-1"><a href="/front-end" typeof="skos:Concept" property="rdfs:label skos:prefLabel">前端</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/7" typeof="skos:Concept" property="rdfs:label skos:prefLabel">响应式Web设计</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/8" typeof="skos:Concept" property="rdfs:label skos:prefLabel">CSS3</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/17" typeof="skos:Concept" property="rdfs:label skos:prefLabel">HTML5</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/10" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动设备</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/13" typeof="skos:Concept" property="rdfs:label skos:prefLabel">media query</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/18" typeof="skos:Concept" property="rdfs:label skos:prefLabel">语义化</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/11" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPhone</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/12" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPad</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/19" typeof="skos:Concept" property="rdfs:label skos:prefLabel">WebKit</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/46" typeof="skos:Concept" property="rdfs:label skos:prefLabel">网站移动化</a></li></ul> Tue, 04 Oct 2011 03:25:02 +0000 C7210 7 at http://www.beforweb.com http://www.beforweb.com/node/7#comments