客服
響應式布局的設計思路
如果你已經(jīng)了解過(guò)什么是響應式布局，那在我們的實(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、CSS3中的Media Query（媒介查詢(xún)）是什么？[1]
通過(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-height顯示屏幕/觸覺(jué)設備。
渲染窗口的寬和高width，height顯示屏幕/觸覺(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 rel=“stylesheet” type=“text/css” media=“only screen and （max-width： 480px），only screen and （max-device-width： 480px）” href=“link.css”/>
上面使用中only可省略，限定于計算機顯示器，第一個(gè)條件max-width是指渲染界面最大寬度，第二個(gè)條件max-device-width是指設備最大寬度。
@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、可用設備名參數：
可用設備名參數
可用設備名參數
5、邏輯關(guān)鍵字：
邏輯關(guān)鍵字
邏輯關(guān)鍵字
6、可用設備名參數：
可用設備名參數
可用設備名參數
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=“width=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)縮放
比如一個(gè)移動(dòng)終端屏幕顯示最大寬度為480px，那么css代碼如下：[2]
@media only screen and(max-device-width:480px){…/*此處為支持此移動(dòng)設備的css樣式代碼，需將其放置于pc終端css代碼之后覆蓋之*/}
如果是大型的網(wǎng)站或項目，我們講為各類(lèi)型的移動(dòng)終端獨立編寫(xiě)css樣式文件，此時(shí)的使用方式如下：
<link rel=”stylesheet” type=”text/css” media=”only screen and (max-device-width:480px)” href=”small_screen480.css”>
/*small_screen480.css即為對480px大小移動(dòng)終端書(shū)寫(xiě)的css文件*/
css文件被區分引用，接下來(lái)的工作就是我們非常熟識的彈性布局了，另外再注意倆點(diǎn)，一是圖片，在移動(dòng)設備上，要做一些特定適合的小圖片來(lái)匹配，如果單純使用壓縮的圖片會(huì )失真，影響用戶(hù)體驗；二是在頭部加入如下代碼，目的是聲明在移動(dòng)設備上設置原始大小顯示和是否縮放[2]
<meta name=”viewport” content=”width=device-width; initial-scale=1.0″>
最后說(shuō)下IE瀏覽器，因為他不支持media Queries的，使用時(shí)需要引用一個(gè)Media Query Javascript解決，如下：[2]
<!–[if lt IE 9]>
<script src=”../../css3-mediaqueries.js”></script>
<![endif]–>
西安蟠龍網(wǎng)絡(luò )科技有限公司：西北地區的網(wǎng)站制作商！
相關(guān)文章：
-
隨著(zhù)互聯(lián)網(wǎng)的普及，很多人們已經(jīng)進(jìn)軍互聯(lián)網(wǎng)行業(yè)，那么怎么深層次的了解網(wǎng)站建設那？我們先從SEO說(shuō)起。西安網(wǎng)站建設推薦閱讀 西安網(wǎng)站建設：網(wǎng)站改版這些問(wèn)題不能忽視 一、優(yōu)化...
-
劍鋒網(wǎng)絡(luò )1月10日訊，企業(yè)在建站時(shí)對于選擇模板建站還是定制網(wǎng)站會(huì )考慮眾多因素，那么，模板建站和定制開(kāi)發(fā)最核心的區別又到底是什么呢? 一、質(zhì)量 模版網(wǎng)站相對來(lái)說(shuō)建站價(jià)格會(huì )相...
-
HTML5作為網(wǎng)站建設的新一代程序語(yǔ)言，經(jīng)過(guò)幾年的發(fā)展，其書(shū)寫(xiě)的規范和標準終于塵埃落定，它主要改良的是手機網(wǎng)站建設中存在的復雜問(wèn)題，開(kāi)發(fā)者可直接在手機網(wǎng)頁(yè)上對網(wǎng)站進(jìn)行調...
-
我們怎么實(shí)時(shí)關(guān)注重點(diǎn)關(guān)鍵詞，百度推廣鳳巢系統便攜管理提供查看排名功能，選擇賬戶(hù)內已有關(guān)鍵詞重點(diǎn)關(guān)注，隨時(shí)看排名，及時(shí)優(yōu)化。那么，我們如何實(shí)時(shí)關(guān)注重點(diǎn)關(guān)鍵詞？ 1、 添...
-
搜索推廣出價(jià)策略可以從以下4個(gè)方面考慮：百度后臺托管,西安網(wǎng)站建設推薦閱讀 西安競價(jià)托管：IP排除如何獲得競爭對手IP , 1、出價(jià)策略建立在良好的賬戶(hù)結構基礎上，根據賬戶(hù)結構...
-
我們正生活在后電腦時(shí)代，目前大多數用戶(hù)使用移動(dòng)電子設備，這意味這不久的將來(lái)PC用戶(hù)將成為互聯(lián)網(wǎng)大軍中的少數派。為了緊跟時(shí)代的步伐，今天我們就來(lái)說(shuō)說(shuō)響應式企業(yè)網(wǎng)站頁(yè)面...
-
百度競價(jià)到底能不能幫助客戶(hù)實(shí)現真正的盈利，讓我們來(lái)分析一下。之前，一個(gè)人做一個(gè)站點(diǎn)，靠著(zhù)seo就能賺到不少的Money?，F在不一樣了，這個(gè)互聯(lián)網(wǎng)時(shí)代已經(jīng)不是一個(gè)可以單打獨斗...
-
網(wǎng)站推廣的文章標題中要有關(guān)鍵字 標題通常是搜索引擎分析判斷網(wǎng)頁(yè)的第一步也是用戶(hù)決定是否要瀏覽該網(wǎng)頁(yè)的第一步,標題中包含關(guān)鍵字，使搜索引擎更好的理解收錄該網(wǎng)頁(yè)、幫助用...
-
想要做出一個(gè)優(yōu)秀的網(wǎng)頁(yè)設計，就要在網(wǎng)頁(yè)設計過(guò)程中要注意一些問(wèn)題，才能做出一個(gè)好的網(wǎng)頁(yè)。一個(gè)好的網(wǎng)頁(yè)設計，不僅吸引眼球，也是實(shí)用的、直觀(guān)的、層級簡(jiǎn)單卻足夠復雜到保持...
-
百度競價(jià)是當前比較重要的推廣渠道，特別是新站前期主要依托的就是百度競價(jià)，畢竟這個(gè)只要你給了錢(qián)，就可以獲取關(guān)鍵詞的排名，但隨著(zhù)做競價(jià)的企業(yè)越來(lái)越多，百度競價(jià)成本上升...