淺談網(wǎng)頁(yè)設計中的響應式布局分析發(fā)布者：本站     時(shí)間：2021-12-15 11:12:27

講到響應式布局，相信大家都有一定的了解，響應式布局是今年很流行的一個(gè)設計理念，隨著(zhù)移動(dòng)互聯(lián)網(wǎng)的盛行，為解決如今各式各樣的瀏覽器分辨率以及不同移動(dòng)設備的顯示效果，設計師提出了響應式布局的設計方案。今天就和大家來(lái)講講響應式布局這件小事，包含什么是響應式布局、響應式布局的優(yōu)點(diǎn)和缺點(diǎn)以及響應式布局該怎么設計（通過(guò)CSS3 Media Query實(shí)現響應布局）。

淺談<a href=/photoshop/web/ target=_blank class=infotextkey>網(wǎng)頁(yè)設計</a>中的響應式布局分析,PS教程,

一、什么是響應式布局?
響應式布局是Ethan Marcotte在2010年5月份提出的一個(gè)概念，簡(jiǎn)而言之，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。這個(gè)概念是為解決移動(dòng)互聯(lián)網(wǎng)瀏覽而誕生的。

響應式布局可以為不同終端的用戶(hù)提供更加舒適的界面和更好的用戶(hù)體驗，而且隨著(zhù)目前大屏幕移動(dòng)設備的普及，用大勢所趨來(lái)形容也不為過(guò)。隨著(zhù)越來(lái)越多的設計師采用這個(gè)技術(shù)，我們不僅看到很多的創(chuàng )新，還看到了一些成形的模式。

二、響應式布局有哪些優(yōu)點(diǎn)和缺點(diǎn)?
優(yōu)點(diǎn)：
面對不同分辨率設備靈活性強
能夠快捷解決多設備顯示適應問(wèn)題
缺點(diǎn)：
兼容各種設備工作量大，效率低下
代碼累贅，會(huì )出現隱藏無(wú)用的元素，加載時(shí)間加長(cháng)
其實(shí)這是一種折衷性質(zhì)的設計解決方案，多方面因素影響而達不到最佳效果
一定程度上改變了網(wǎng)站原有的布局結構，會(huì )出現用戶(hù)混淆的情況
三、響應式布局該怎么設計?
我們在上面了解了什么是響應式布局，那在我們的實(shí)際項目中應該怎么去設計呢?在以往我們設計網(wǎng)站的時(shí)候都會(huì )受到不同瀏覽器的兼容性的困擾，現在還要來(lái)個(gè)不同尺寸設備，我們該怎么淡定下來(lái)呢?有需求就會(huì )有解決方案，呵呵，說(shuō)到響應式布局，就不得不提起CSS3中的Media Query（媒介查詢(xún)），這可是個(gè)好東西，易用、強大、快捷……Media Query是制作響應式布局的一個(gè)利器，使用這個(gè)工具，我們可以非常方便快捷的制造出各種豐富的實(shí)用性強的界面。接下來(lái)就一起來(lái)深入的了解Media Query。

1、CSS中的Media Query（媒介查詢(xún)）是什么?
通過(guò)不同的媒體類(lèi)型和條件定義樣式表規則。媒體查詢(xún)讓CSS可以更精確作用于不同的媒體類(lèi)型和同一媒體的不同條件。媒體查詢(xún)的大部分媒體特性都接受min和max用于表達”大于或等于”和”小與或等于”。如：width會(huì )有min-width和max-width媒體查詢(xún)可以被用在CSS中的@media和@import規則上，也可以被用在HTML和XML中。通過(guò)這個(gè)標簽屬性，我們可以很方便的在不同的設備下實(shí)現豐富的界面，特別是移動(dòng)設備，將會(huì )運用更加的廣泛。

2、media query能夠獲取哪些值?
設備的寬和高device-width，device-heigth顯示屏幕/觸覺(jué)設備。
渲染窗口的寬和高width，heigth顯示屏幕/觸覺(jué)設備。
設備的手持方向，橫向還是豎向orientation(portrait|lanscape)和打印機等。
畫(huà)面比例aspect-ratio點(diǎn)陣打印機等。
設備比例device-aspect-ratio-點(diǎn)陣打印機等。
對象顏色或顏色列表color，color-index顯示屏幕。
設備的分辨率resolution。
3、語(yǔ)法結構及用法
@media 設備名 only (選取條件) not (選取條件) and(設備選取條件)，設備二{sRules}
示例一：在link中使用@media：

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px),only screen and (max-device-width: 480px)" href="link.css" rel="external nofollow" />
上面使用中only可省略，限定于計算機顯示器，第一個(gè)條件max-width是指渲染界面最大寬度，第二個(gè)條件max-device-width是指設備最大寬度。

示例二：在樣式表中內嵌@media：

@media (min-device-width:1024px) and (max-width:989px),screen and (max-device-width:480px),(max-device-width:480px) and (orientation:landscape),(min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {srules}
在示例二中，設置了電腦顯示器分辨率（寬度）大于或等于1024px（并且最大可見(jiàn)寬度為989px）；屏寬在480px及其以下手持設備；屏寬在480px以及橫向（即480尺寸平行于地面）放置的手持設備；屏寬大于或等于480px小于1024px以及垂直放置設備的css樣式。

從上面的例子可以看出，字符間以空格相連，選取條件包含在小括號內，srules為兼容設置的樣式表，包含在中括號里面。only（限定某種設備，可省略），and（邏輯與），not（排除某種設備）為邏輯關(guān)鍵字，多種設備用逗號分隔，這一點(diǎn)繼承了css基本語(yǔ)法。

4、可用設備名參數：
類(lèi)型 解釋
all 所有設備
braille 盲文
embossed 盲文打印
handheld 手持設備
print 文檔打印或打印預覽模式
projection 項目演示，比如幻燈
screen 彩色電腦屏幕
speech 演講
tty 固定字母間距的網(wǎng)格的媒體，比如電傳打字機
tv 電視
5、邏輯關(guān)鍵字：
關(guān)鍵字 說(shuō)明
only 限定某種設備類(lèi)型
and 邏輯與，連接設備名與選擇條件、選擇條件1與選擇條件2
not 排除某種設備
, 設備列表
6、可用設備名參數：
媒體特性 值 可用媒體類(lèi)型 接受min/max 簡(jiǎn)介
width <length> 視覺(jué)屏幕/觸摸設備 yes 定義輸出設備中的頁(yè)面可見(jiàn)區域寬度(單位一般為px)
heigth <length> 視覺(jué)屏幕/觸摸設備 yes 定義輸出設備中的頁(yè)面可見(jiàn)區域高度(單位一般為px)
device-width <length> 視覺(jué)屏幕/觸摸設備 yes 定義輸出設備的屏幕可見(jiàn)寬度(單位一般為px)
device-heigth <length> 視覺(jué)屏幕/觸摸設備 yes 定義輸出設備的屏幕可見(jiàn)高度(單位一般為px)
orientation portrait | landscape 位圖介質(zhì)類(lèi)型 no 定義’height’是否大于或等于’width’。值portrait代表是，landscape代表否即設，備手持方向：portait為橫向，landscape為豎向
aspect-ratio <ratio> 位圖介質(zhì)類(lèi)型 yes 定義’width’與’height’的比率，即瀏覽器的長(cháng)寬比
device-aspect-ratio <ratio> 位圖介質(zhì)類(lèi)型 yes 定義’device-width’與’device-height’的比率，即設備屏幕長(cháng)寬比。如常見(jiàn)的顯示器比率：4/3， 16/9，16/10
color <integer> 視覺(jué)媒體 yes 定義每一組輸出設備的彩色原件個(gè)數。如果不是彩色設備，則值等于0
color-index <integer> 視覺(jué)媒體 yes 定義在輸出設備的彩色查詢(xún)表中的條目數。如果沒(méi)有使用彩色查詢(xún)表，則值等于0
monochrome <integer> 視覺(jué)媒體 yes 定義在一個(gè)單色框架緩沖區中每像素包含的單色原件個(gè)數。如果不是單色設備，則值等于0
resolution <resolution> 位圖介質(zhì)類(lèi)型 yes 定義設備的分辨率。如：96dpi，300dpi，118dpcm
scan progressive | interlace 電視類(lèi) no 定義電視類(lèi)設備的掃描工序， progressive逐行掃描，interlace隔行掃描
grid <integer> 柵格設備 no 用來(lái)查詢(xún)輸出設備是否使用柵格或點(diǎn)陣。只有1和0才是有效值，1代表是，0代表否
7、測試Media Queries
最后，我們需要對我們剛剛設計的Media Queries進(jìn)行測試，想要在不同設備上測試Media Queries的效果，可以使用一個(gè)瀏覽工具來(lái)檢驗不同尺寸屏幕下的顯示效果，在這里為大家介紹一個(gè)不錯的在線(xiàn)工具 – Responsivator，它可以模擬iPhone等各種不同設備，并且還可以自定義不同尺寸屏幕的顯示效果，只需要輸入一個(gè)url甚至是本地的一個(gè)url(如:http://127.0.0.1/)，就可以看到網(wǎng)站在不同尺寸屏幕下的顯示效果.

8、通過(guò)Media Queries實(shí)現響應式布局設計
好了，我們明白了什么是Media Query，那我們一起來(lái)運用到響應式布局的設計項目中去。設計思路很簡(jiǎn)單，首先先定義在標準瀏覽器下的固定寬度（假如標準瀏覽器的分辨率為1024px，那么我們設置寬為980px），然后用Media Query來(lái)監測瀏覽器的尺寸變化，當瀏覽器的分辨率小于1024px的時(shí)候，則通過(guò)Media Query預設的樣式表來(lái)將頁(yè)面的寬度設置為百分比顯示，這樣子頁(yè)面的結構元素就會(huì )根據瀏覽器的的尺寸來(lái)進(jìn)行相對應的調整。同理，當瀏覽器的可視區域改變到某個(gè)值（假如為650px）的時(shí)候，頁(yè)面的結構元素根據Media Query預設的層疊樣式表來(lái)進(jìn)行相對應的調整?？纯次覀兊睦樱?br />
 /* 當瀏覽器的可視區域小于980px */@media screen and (max-width: 980px) {     #wrap {width: 90%; margin:0 auto;}     #content {width: 60%;padding: 5%;}     #sidebar {width: 30%;}     #footer {padding: 8% 5%;margin-bottom: 10px;}} /* 當瀏覽器的可視區域小于650px */@media screen and (max-width: 650px) {     #header {height: auto;}     #searchform {position: absolute;top: 5px;right: 0;}     #content {width: auto; float: none; margin: 20px 0;}     #sidebar {width: 100%; float: none; margin: 0;} }
通過(guò)上面我們就可以監測瀏覽器的可視區域變化的是時(shí)候我們的頁(yè)面結構元素也會(huì )相對應的變化，當然你可以再多設置幾個(gè)尺寸的監測層疊樣式表，這樣子就可以根據不同尺寸設備來(lái)進(jìn)行響應式的布局。為了更好的顯示效果，我們往往還要格式化一些CSS屬性的初始值：

/* 禁用iPhone中Safari的字號自動(dòng)調整 */html { -webkit-text-size-adjust: none;}/* 設置HTML5元素為塊 */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}/* 設置圖片視頻等自適應調整 */img { max-width: 100%; height: auto; width: auto/9; /* ie8 */}.video embed, .video object, .video iframe { width: 100%; height: auto;}
最后要注意的是在頁(yè)面的頭部<head></head>之間加上下面這句∶

<meta name="viewport" content="device-width; initial-scale=1.0">
meta viewport這個(gè)屬性是在移動(dòng)設備上設置原始大小顯示和是否縮放的聲明。

參數設置∶

width – viewport的寬度
height – viewport的高度
initial-scale – 初始的縮放比例
minimum-scale – 允許用戶(hù)縮放到的最小比例
maximum-scale – 允許用戶(hù)縮放到的最大比例
user-scalable – 用戶(hù)是否可以手動(dòng)縮放
最后對于在IE瀏覽器中不支持media query的情況，我們可以使用Media Query JavaScript來(lái)解決，只需要在頁(yè)面頭部引用css3-mediaqueries.js即可。示例：

<!--[if lt IE 9]>     <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->