css適配不同解析度螢幕
如今的螢幕解析度,小至320px(iPhone),大到2560px甚至更高(大顯示器),變化範圍極大。除了使用傳統的桌上型電腦,使用者會越來越多的通過手機、上網本、iPad一類的平板裝置來瀏覽頁面。這種情況下,固定寬度的設計方案將會顯得越發不合理。頁面需要有更好的適應性,其佈局結構要做到根據不同的裝置及螢幕解析度進行響應調整。接下來,我們將瞭解一下怎樣通過HTML5和CSS3 Media Queries(媒介查詢)相關技術來實現跨裝置跨瀏覽器的響應式Web設計方案。
範例效果預覽
首先,我們來看看本篇範例的最終效果演示。開啟該頁面,拖拽瀏覽器邊框,將視窗慢慢縮小,同時觀察頁面結構及元素佈局是怎樣基於寬度變化而自動響應調整的。
更多範例
概述
我們將範例頁面的父級容器寬度設定為固定的980px,對於桌面瀏覽環境,該寬度適用於任何寬於1024畫素的解析度。我們通過media query來監測那些寬度小於980px的裝置解析度,並將頁面的寬度設定由"固定"方式改為"液態",佈局元素的寬度隨著瀏覽器視窗的尺寸變化進行調整。當可視部分的寬度進一步減小到650px以下時,主要內容部分的容器寬度會增大至全屏,而側邊欄將被置於主內容部分的下方,整個頁面變為單欄佈局。
HTML程式碼
我們將把注意力集中在頁面的主要佈局方面,並使用HTML5標籤來更加語義化的實現這些結構,包括頁頭、主要內容部分、側邊欄和頁尾:
<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瀏覽器建立HTML5元素節點。在我們的頁面HTML程式碼中呼叫該JS檔案:
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
CSS
HTML5塊級元素樣式
首先仍是瀏覽器相容問題。雖然我們已經可以在低版本的IE中建立HTML5元素節點,但還是需要在樣式方面做些工作,將這些"新"元素宣告為塊級:
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
主要結構的CSS
忽略細節,我們仍是將注意力集中在大問題上。正如在前文"概述"中提到的,預設情況下頁面容器的固定寬度為980畫素,頁頭部分(header)的固定高度為160畫素;主要內容部分(content)的寬度為600畫素,左浮動;側邊欄(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和預設結構樣式,當然,並不包括那些與話題無關的細節實現問題。正如可以在目前的演示中看到的,由於還沒有做任何media query方面的工作,頁面還不能隨著瀏覽器尺寸的變化而改變佈局。
CSS3 Media Query
終於開始說正事兒了。首先我們需要在頁面中呼叫css3-mediaqueries.js檔案,來幫助IE8或是之前的版本支援CSS3 media queries:
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
接下來,我們要建立CSS樣式表,並在頁面中呼叫:
<link href="media-queries.css" rel="stylesheet" type="text/css">
當瀏覽器可視部分寬度大於650px小於980px時(液態佈局)
將pagewrap的寬度設定為95%
將content的寬度設定為60%
將sidebar的寬度設定為30%
@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;
}
}
當瀏覽器可視部分寬度小於650px時(單欄佈局)
將header的高度設定為auto
將searchform絕對定位在top 5px的位置
將main-nav、site-logo、site-description的定位設定為static
將content的寬度設定為auto(主要內容部分的寬度將擴充套件至滿屏),並取消float設定
將sidebar的寬度設定為100%,並取消float設定
@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;
}
}
當瀏覽器可視部分寬度小於480px時
480px也就是iPhone橫屏時的寬度。當可視部分的寬度小於該數值時,我們需要做以下調整:
禁用html節點的字號自動調整。預設情況下,iPhone會將過小的字號放大,我們可以通過-webkit-text-size-adjust屬性進行調整。
將main-nav中的字號設定為90%
@media screen and (max-width: 480px) {
html {
-webkit-text-size-adjust: none;
}
#main-nav a {
font-size: 90%;
padding: 10px 8px;
}
}
彈性圖片
我們需要為圖片設定max-width:100%和height:auto,來實現其彈性化。對於IE,仍然需要一點額外的工作:
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
彈性內嵌視訊
同樣的,對於視訊,我們也需要做max-width: 100%的設定;但是Safari對embed的該屬性支援不是很給力,所以我們以width: 100%來代替:
.video embed,
.video object,
.video iframe {
width: 100%;
height: auto;
}
iPhone中的初始化縮放
預設情況下,iPhone中的Safari瀏覽器會對頁面進行自動縮放,以適應螢幕尺寸。我們可以使用以下的meta設定,將裝置的預設寬度作為頁面在Safari的可視部分寬度,並禁止初始化縮放。
<meta name="viewport" content="width=device-width; initial-scale=1.0">
最終效果演示
該範例的最終演示正像我們在本文開始時看到的那樣;另外記得,在條件允許的情況下,使用各種典型移動裝置(iPhone、iPad、Android、Blackberry等)來檢驗頁面的移動版本。
要點總結
Media Query JavaScript
對於那些尚不支援media query的瀏覽器,我們要在頁面中呼叫css3-mediaqueries.js
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
CSS Media Queries
實現自適應頁面設計的關鍵之一,就是使用CSS根據解析度寬度的變化來調整頁面佈局結構。
@media screen and (max-width: 560px) {
#content {
width: auto;
float: none;
}
#sidebar {
width: 100%;
float: none;
}
}
彈性圖片
通過max-width:100%和height:auto實現圖片的彈性化。
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
彈性內嵌元素(視訊)
通過width:100%和height:auto實現內嵌元素的彈性化。
.video embed,
.video object,
.video iframe {
width: 100%;
height: auto;
}
字號自動調整的問題
通過-webkit-text-size-adjust:none禁用iPhone中Safari的字號自動調整
html {
-webkit-text-size-adjust: none;
}
頁面寬度縮放的問題
<meta name="viewport" content="width=device-width; initial-scale=1.0">