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

范例效果預(yù)覽

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

更多范例

使用media query的方式設(shè)計了一些WordPress模板，比如Tisa、Elemin、Suco、iTheme2、Funki、Minblr和Wumblr等。

概述

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

HTML代碼

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

Demo

Site Description

Home

blog post

widget

footer

HTML5.js

IE是永恒的話題;對于我們使用的HTML5標(biāo)簽，IE9之前的版本無法提供支持。目前的好

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

主要結(jié)構(gòu)的CSS

忽略細(xì)節(jié)，我們?nèi)允菍⒆⒁饬性诖髥栴}上。正如在前文"概述"中提到的，默認(rèn)情況下頁面容器的固定寬度為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;}

截至目前的效果演示

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

CSS3 Media Query

終于開始說正事兒了。首先我們需要在頁面中調(diào)用css3-mediaqueries.js文件，來幫助IE8或是之前的版本支持CSS3 media queries：

接下來，我們要創(chuàng)建CSS樣式表，并在頁面中調(diào)用：

當(dāng)瀏覽器可視部分寬度大于650px小于980px時(液態(tài)布局)

將pagewrap的寬度設(shè)置為95%

將content的寬度設(shè)置為60%

將sidebar的寬度設(shè)置為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;}

當(dāng)瀏覽器可視部分寬度小于650px時(單欄布局)

將header的高度設(shè)置為auto

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

將main-nav、site-logo、site-description的定位設(shè)置為static

將content的寬度設(shè)置為auto(主要內(nèi)容部分的寬度將擴(kuò)展至滿屏)，并取消float設(shè)置

將sidebar的寬度設(shè)置為99.99%，并取消float設(shè)置

@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: 99.99%;float: none;margin: 0;}}

當(dāng)瀏覽器可視部分寬度小于480px時

480px也就是iPhone橫屏?xí)r的寬度。當(dāng)可視部分的寬度小于該數(shù)值時，我們需要做以下調(diào)整：

禁用html節(jié)點(diǎn)的字號自動調(diào)整。默認(rèn)情況下，iPhone會將過小的字號放大，我們可以通過-webkit-text-size-adjust屬性進(jìn)行調(diào)整。

將main-nav中的字號設(shè)置為90%

@media screen and (max-width: 480px) {

html {-webkit-text-size-adjust: none;}

#main-nav a {font-size: 90%;padding: 10px 8px;　}　}

彈性圖片

我們需要為圖片設(shè)置max-width:99.99%和height:auto，來實(shí)現(xiàn)其彈性化。對于IE，仍然需要一點(diǎn)額外的工作：

img {max-width: 99.99%;height: auto;width: auto\9; /* ie8 */}

彈性內(nèi)嵌視頻

同樣的，對于視頻，我們也需要做max-width： 99.99%的設(shè)置;但是Safari對embed的該屬性支持不是很給力，所以我們以width： 99.99%來代替：

.video embed,

.video object,

.video iframe {width: 99.99%;height: auto;}

iPhone中的初始化縮放

默認(rèn)情況下，iPhone中的Safari瀏覽器會對頁面進(jìn)行自動縮放，以適應(yīng)屏幕尺寸。我們可以使用以下的meta設(shè)置，將設(shè)備的默認(rèn)寬度作為頁面在Safari的可視部分寬度，并禁止初始化縮放。

最終效果演示

該范例的最終演示正像我們在本文開始時看到的那樣;另外記得，在條件允許的情況下，使用各種典型移動設(shè)備(iPhone、iPad、Android、Blackberry等)來檢驗(yàn)頁面的移動版本。

要點(diǎn)總結(jié)

Media Query JavaScript

對于那些尚不支持media query的瀏覽器，我們要在頁面中調(diào)用css3-mediaqueries.js

CSS Media Queries

實(shí)現(xiàn)自適應(yīng)頁面設(shè)計的關(guān)鍵之一，就是使用CSS根據(jù)分辨率寬度的變化來調(diào)整頁面布局結(jié)構(gòu)。

@media screen and (max-width: 560px) {

#content {width: auto;float: none;}

#sidebar {width: 99.99%;float: none;}}

彈性圖片

通過max-width:99.99%和height:auto實(shí)現(xiàn)圖片的彈性化。

img {max-width: 99.99%;height: auto;width: auto\9; /* ie8 */}

彈性內(nèi)嵌元素(視頻)

通過width:99.99%和height:auto實(shí)現(xiàn)內(nèi)嵌元素的彈性化。

.video embed,

.video object,

.video iframe {width: 99.99%;height: auto;}

字號自動調(diào)整的問題

通過-webkit-text-size-adjust:none禁用iPhone中Safari的字號自動調(diào)整

html {-webkit-text-size-adjust: none;}

響應(yīng)式Web網(wǎng)站設(shè)計知識分享非常給力，值得每一個人關(guān)注!

當(dāng)前名稱：我不僅能玩轉(zhuǎn)OA還能玩轉(zhuǎn)APP,你信不信?
網(wǎng)頁URL：http://jinyejixie.com/news22/189072.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、定制網(wǎng)站、云服務(wù)器、網(wǎng)站制作、服務(wù)器托管、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)