Be For Web - WebKit https://www.beforweb.c7210.info/taxonomy/term/19 en 通过CSS3 Media Query实现响应式Web设计 https://www.beforweb.c7210.info/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="https://www.beforweb.c7210.info/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 https://www.beforweb.c7210.info https://www.beforweb.c7210.info/node/7#comments