本篇文章給大家分享的是有關(guān)如何用3個步驟實(shí)現(xiàn)響應(yīng)式Web設(shè)計(jì)，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

創(chuàng)新互聯(lián)建站堅(jiān)信：善待客戶，將會成為終身客戶。我們能堅(jiān)持多年，是因?yàn)槲覀円恢笨芍档眯刨?。我們從不忽悠初訪客戶，我們用心做好本職工作，不忘初心，方得始終。10余年網(wǎng)站建設(shè)經(jīng)驗(yàn)創(chuàng)新互聯(lián)建站是成都老牌網(wǎng)站營銷服務(wù)商,為您提供網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)、html5、網(wǎng)站制作、品牌網(wǎng)站制作、小程序定制開發(fā)服務(wù),給眾多知名企業(yè)提供過好品質(zhì)的建站服務(wù)。

寫在前面的話：隨著移動設(shè)備的逐漸普及和Web技術(shù)的發(fā)展，跨端的Web開發(fā)需求將會越來越大。如何在多種設(shè)備上進(jìn)行跨端的界面適配呢?我們可以利用CSS3的Media Query來實(shí)現(xiàn)。這里主要介紹了移動開發(fā)和CSS3結(jié)合，來進(jìn)行多種分辨率適配的例子。

文中提到的響應(yīng)式網(wǎng)頁設(shè)計(jì)(Responsive web design)是一種現(xiàn)代網(wǎng)頁設(shè)計(jì)方法，基于CSS3的媒介查詢(Media Query)特性使得網(wǎng)頁適應(yīng)不同設(shè)備，即根據(jù)設(shè)備的分辨率和縮放自動重新布局。

響應(yīng)式網(wǎng)頁設(shè)計(jì)現(xiàn)在無疑是一件大事情。如果你還不了解響應(yīng)式設(shè)計(jì)，可以看看我最近發(fā)表的響應(yīng)式站點(diǎn)列表(譯者注：可以好好看看示例中的網(wǎng)站在不同分辨率下的展現(xiàn)方式)。對新手來說，響應(yīng)式設(shè)計(jì)可能有一點(diǎn)復(fù)雜，但是事實(shí)上比你想象的簡單。為了幫助你迅速的了解響應(yīng)式設(shè)計(jì)，我起草了一篇快速教程。你可以在3個步驟中學(xué)習(xí)到響應(yīng)式設(shè)計(jì)和媒介查詢(Media Queries)的基本原理(假定你了解基本的CSS知識)。

第一步：Meta標(biāo)簽(查看演示)

大多數(shù)移動瀏覽器將HTML頁面放大為寬的視圖(viewport)以符合屏幕分辨率。你可以使用視圖的meta標(biāo)簽來進(jìn)行重置。下面的視圖標(biāo)簽告訴瀏覽器，使用設(shè)備的寬度作為視圖寬度并禁止初始的縮放。在標(biāo)簽里加入這個meta標(biāo)簽。

IE8或者更早的瀏覽器并不支持Media Query。你可以使用media-queries.js或者respond.js來為IE添加Media Query支持。

第二步：HTML結(jié)構(gòu)

在這個例子里，我有一個包括頭部、內(nèi)容、側(cè)邊欄和頁腳的基本頁面布局。頭部有固定的高度180像素，內(nèi)容容器是600像素而側(cè)邊欄是300像素。

第三步：媒介查詢-Media Queries

CSS3 Media Query-媒介查詢是響應(yīng)式設(shè)計(jì)的核心。它根據(jù)條件告訴瀏覽器如何為指定視圖寬度渲染頁面。

當(dāng)視圖寬度為小于等于980像素時(shí)，如下規(guī)則將會生效。基本上，我會將所有的容器寬度從像素值設(shè)置為百分比以使得容器大小自適應(yīng)。

然后為小于等于700像素的視圖指定#content和#sidebar的寬度為自適應(yīng)并且清除浮動，使得這些容器按全寬度顯示。

對于小于等于480像素(手機(jī)屏幕)的情況，將#header元素的高度設(shè)置為自適應(yīng)，將h2的字體大小修改為24像素并隱藏側(cè)邊欄。

你可以根據(jù)你的喜好添加足夠多的媒介查詢。我在示例中僅僅展示了3個媒介查詢。媒介查詢的目的在于為指定的視圖寬度指定不同的CSS規(guī)則，來實(shí)現(xiàn)不同的布局。媒介查詢可以寫在同一個或者單獨(dú)的樣式表中。

以上就是如何用3個步驟實(shí)現(xiàn)響應(yīng)式Web設(shè)計(jì)，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降摹ＯＭ隳芡ㄟ^這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。