適配不同解析度螢幕

如今的螢幕解析度，小至320px（iphone），大到2560px甚至更高（大顯示器），變化範圍極大。除了使用傳統的台式電腦，使用者會越來越多的通過手機、上網本、ipad一類的平板裝置來瀏覽頁面。這種情況下，固定寬度的設計方案將會顯得越發不合理。頁面需要有更好的適應性，其布局結構要做到根據不同的裝置及螢幕解析度進行響應調整。接下來，我們將了解一下怎樣通過html5和css3 media queries（媒介查詢）相關技術來實現跨裝置跨瀏覽器的響應式web設計方案。

範例效果預覽

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

更多範例

我（原文作者）使用media query的方式設計了一些wordpress模板，比如tisa、elemin、suco、itheme2、funki、minblr和wumblr等。

概述

我們將範例頁面的父級容器寬度設定為固定的980px，對於桌面瀏覽環境，該寬度適用於任何寬於1024畫素的解析度。我們通過media query來監測那些寬度小於980px的裝置解析度，並將頁面的寬度設定由"固定"方式改為"液態"，布局元素的寬度隨著瀏覽器視窗的尺寸變化進行調整。當可視部分的寬度進一步減小到650px以下時，主要內容部分的容器寬度會增大至全屏，而側邊欄將被置於主內容部分的下方，整個頁面變為單欄布局。

html**

我們將把注意力集中在頁面的主要布局方面，並使用html5標籤來更加語義化的實現這些結構，包括頁頭、主要內容部分、側邊欄和頁尾：

blog post widget footer

html5.jsie是永恆的話題；對於我們使用的html5標籤，ie9之前的版本無法提供支援。目前的最佳解決方案仍是通過html5.js來幫助這些舊版本的ie瀏覽器建立html5元素節點。在我們的頁面html**中呼叫該js檔案：

csshtml5塊級元素樣式

首先仍是瀏覽器相容問題。雖然我們已經可以在低版本的ie中建立html5元素節點，但還是需要在樣式方面做些工作，將這些"新"元素宣告為塊級：

article, aside, details, figcaption, figure, footer, header, hgroup, menu, n**, section

主要結構的css忽略細節，我們仍是將注意力集中在大問題上。正如在前文"概述"中提到的，預設情況下頁面容器的固定寬度為980畫素，頁頭部分（header）的固定高度為160畫素；主要內容部分（content）的寬度為600畫素，左浮動；側邊欄（sidebar）右浮動，寬度為280畫素。

#pagewrap #header #content #sidebar #footer

截至目前的效果演示目前我們只是初步完成了頁面結構的html和預設結構樣式，當然，並不包括那些與話題無關的細節實現問題。正如可以在目前的演示中看到的，由於還沒有做任何media query方面的工作，頁面還不能隨著瀏覽器尺寸的變化而改變布局。

css3 media query

終於開始說正事兒了。首先我們需要在頁面中呼叫css3-mediaqueries.js檔案，來幫助ie8或是之前的版本支援css3 media queries：

接下來，我們要建立css樣式表，並在頁面中呼叫：

當瀏覽器可視部分寬度大於650px小於980px時（液態布局）將pagewrap的寬度設定為95%

將content的寬度設定為60%

將sidebar的寬度設定為30%

@media screen and (max-width: 980px) 
#content 
#sidebar 
#sidebar .widget 
}

當瀏覽器可視部分寬度小於650px時（單欄布局）將header的高度設定為auto

將searchform絕對定位在top 5px的位置

將main-n**、site-logo、site-description的定位設定為static

將content的寬度設定為auto（主要內容部分的寬度將擴充套件至滿屏），並取消float設定

將sidebar的寬度設定為100%，並取消float設定

@media screen and (max-width: 650px) 
#searchform 
#main-n** 
#site-logo 
#site-description 
#content 
#sidebar 
}

當瀏覽器可視部分寬度小於480px時480px也就是iphone橫屏時的寬度。當可視部分的寬度小於該數值時，我們需要做以下調整：

禁用html節點的字型大小自動調整。預設情況下，iphone會將過小的字型大小放大，我們可以通過-webkit-text-size-adjust屬性進行調整。

將main-n**中的字型大小設定為90%

@media screen and (max-width: 480px) 
#main-n** a 
}

彈性

img

.video embed, .video object, .video iframe

iphone中的初始化縮放預設情況下，iphone中的safari瀏覽器會對頁面進行自動縮放，以適應螢幕尺寸。我們可以使用以下的meta設定，將裝置的預設寬度作為頁面在safari的可視部分寬度，並禁止初始化縮放。

最終效果演示該範例的最終演示正像我們在本文開始時看到的那樣；另外記得，在條件允許的情況下，使用各種典型移動裝置（iphone、ipad、android、blackberry等）來檢驗頁面的移動版本。

要點總結

media query j**ascript

對於那些尚不支援media query的瀏覽器，我們要在頁面中呼叫css3-mediaqueries.js

css media queries實現自適應頁面設計的關鍵之一，就是使用css根據解析度寬度的變化來調整頁面布局結構。

@media screen and (max-width: 560px) 
#sidebar 
}

彈性通過max-width:100%和height:auto實現的彈性化。

img

通過width:100%和height:auto實現內嵌元素的彈性化。

.video embed, .video object, .video iframe

字型大小自動調整的問題通過-webkit-text-size-adjust:none禁用iphone中safari的字型大小自動調整

html

頁面寬度縮放的問題

適配不同解析度螢幕

螢幕解析度適配

螢幕解析度適配

螢幕解析度適配心得

適配不同解析度螢幕

螢幕解析度適配

螢幕解析度適配

螢幕解析度適配心得

相關推薦