十一長假已然過去了一大半。今天倒真是晴朗的不行，向窗外望去幾乎可以看到陽光穿過涼爽的空氣一縷縷灑落下來的樣子。自從不再是學生，對每年的幾次長假就無比珍惜，想方設法讓每一天都盡量過的飽滿一些；夜里閉上眼，滿腦子就都是Drupal、博客、咖啡、使命召喚、南方公園。..也許需要出門走一走了。

OK開始說正經(jīng)的了。在之前一篇譯文中，我們了解了響應式Web設計的概念、組成要素以及基本的實現(xiàn)思路。今天繼續(xù)相關話題，我們將從前文介紹過的"彈性布局結構"這方面出發(fā)，通過一個具體的實例來深入學習。

如今的屏幕分辨率，小至320px（iPhone），大到2560px甚至更高（大顯示器），變化范圍極大。除了使用傳統(tǒng)的臺式機，用戶會越來越多的通過手機、上網(wǎng)本、iPad一類的平板設備來瀏覽頁面。這種情況下，固定寬度的設計方案將會顯得越發(fā)不合理。頁面需要有更好的適應性，其布局結構要做到根據(jù)不同的設備及屏幕分辨率進行響應調(diào)整。接下來，我們將了解一下怎樣通過HTML5和CSS3 Media Queries（媒介查詢）相關技術來實現(xiàn)跨設備跨瀏覽器的響應式Web設計方案。

范例效果預覽

首先，我們來看看本篇范例的最終效果演示。打開該頁面，拖拽瀏覽器邊框，將窗口慢慢縮小，同時觀察頁面結構及元素布局是怎樣基于寬度變化而自動響應調(diào)整的。

更多范例

我（原文作者）使用media query的方式設計了一些WordPress模板，比如Tisa、Elemin、Suco、iTheme2、Funki、Minblr和Wumblr等。

概述

我們將范例頁面的父級容器寬度設置為固定的980px，對于桌面瀏覽環(huán)境，該寬度適用于任何寬于1024像素的分辨率。我們通過media query來監(jiān)測那些寬度小于980px的設備分辨率，并將頁面的寬度設置由"固定"方式改為"液態(tài)"，布局元素的寬度隨著瀏覽器窗口的尺寸變化進行調(diào)整。當可視部分的寬度進一步減小到650px以下時，主要內(nèi)容部分的容器寬度會增大至全屏，而側(cè)邊欄將被置于主內(nèi)容部分的下方，整個頁面變?yōu)閱螜诓季帧?/p>

HTML代碼

我們將把注意力集中在頁面的主要布局方面，并使用HTML5標簽來更加語義化的實現(xiàn)這些結構，包括頁頭、主要內(nèi)容部分、側(cè)邊欄和頁腳：

<div id="pagewrap">

<header id="header">

<hgroup>

<h1 id="site-logo">Demo</h1>

<h2 id="site-description">Site Description</h2>

</hgroup>

<nav>

<ul id="main-nav">

<li><a href="#">Home</a></li>

</ul>

</nav>

<form id="searchform">

<input type="search">

</form>

</header>

<div id="content">

<article class="post"> blog post </article>

</div>

<aside id="sidebar">

<section class="widget"> widget </section>

</aside>

<footer id="footer"> footer </footer>

</div>

HTML5.js

IE是永恒的話題；對于我們使用的HTML5標簽，IE9之前的版本無法提供支持。目前的最佳解決方案仍是通過html5.js來幫助這些舊版本的IE瀏覽器創(chuàng)建HTML5元素節(jié)點。在我們的頁面HTML代碼中調(diào)用該JS文件：

<!--[if lt IE 9]>

    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

CSS

HTML5塊級元素樣式

首先仍是瀏覽器兼容問題。雖然我們已經(jīng)可以在低版本的IE中創(chuàng)建HTML5元素節(jié)點，但還是需要在樣式方面做些工作，將這些"新"元素聲明為塊級：

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}

主要結構的CSS

忽略細節(jié)，我們?nèi)允菍⒆⒁饬�集中在大問題上。正如在前文"概述"中提到的，默認情況下頁面容器的固定寬度為980像素，頁頭部分（header）的固定高度為160像素；主要內(nèi)容部分（content）的寬度為600像素，左浮動；側(cè)邊欄（sidebar）右浮動，寬度為280像素。

#pagewrap {

    width: 980px;

    margin: 0 auto;

}

 

#header {

    height: 160px;

}

 

#content {

    width: 600px;

    float: left;

}

 

#sidebar {

    width: 280px;

    float: right;

}

 

#footer {

    clear: both;

}

截至目前的效果演示

目前我們只是初步完成了頁面結構的HTML和默認結構樣式，當然，并不包括那些與話題無關的細節(jié)實現(xiàn)問題。正如可以在目前的演示中看到的，由于還沒有做任何media query方面的工作，頁面還不能隨著瀏覽器尺寸的變化而改變布局。

標簽： 響應式Web設計 MediaQuery  

版權申明：本站文章部分自網(wǎng)絡，如有侵權，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權歸原作者所有，如需使用，請與原作者聯(lián)系。