響應式佈局1 阿里雲

免費註冊

• 登陸
• 備案
• 控制檯

 

 

雲資訊

• 首頁
• 雲計算
• 互聯網
• 開發者技術
• 網絡營銷
• 建站
• 域名

• 服務器
• 視覺技術
• 前端技術
• 網站運營

首頁 > 建站 > 網站運營

響應式佈局這件小事 有哪些優勢和缺點該怎麼設計?

發佈時間：2014-12-08更新時間：2014-12-08 來源：網絡

做者：湖縐

關鍵詞： 網頁設計

文集 雲計算 雲服務器 rds 大數據 建站 com域名 軟件安裝 域名註冊

　 中介交易 SEO診斷 淘寶客 雲主機 技術大廳 　

　　講到響應式佈局， 相信你們都有必定的瞭解，響應式佈局是今年很流行的一個設計理念，隨着移動互聯網的盛行，爲解決現在各式各樣的瀏覽器分辨率以及不一樣移動設備的顯示效果， 設計師提出了響應式佈局的設計方案。今天就和你們來說講響應式佈局這件小事，包含什麼是響應式佈局、響應式佈局的優勢和缺點以及響應式佈局該怎麼設計(通 過CSS3 Media Query實現響應佈局)。

　　

 

　　1、什麼是響應式佈局?

　　響應式佈局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站可以兼容多個終端——而不是爲每一個終端作一個特定的版本。這個概念是爲解決移動互聯網瀏覽而誕生的。

　　響應式佈局能夠爲不一樣終端的用戶提供更加溫馨的界面和更好的用戶體驗，並且隨着目前大屏幕移動設備的普及，用大勢所趨來形容也不爲過。隨着愈來愈多的設計師採用這個技術，咱們不只看到不少的創新，還看到了一些成形的模式。

　　2、響應式佈局有哪些優勢和缺點?

　　優勢：

　　面對不一樣分辨率設備靈活性強

　　可以快捷解決多設備顯示適應問題

　　缺點：

　　兼容各類設備工做量大，效率低下

　　代碼累贅，會出現隱藏無用的元素，加載時間加長

　　其實這是一種折衷性質的設計解決方案，多方面因素影響而達不到最佳效果

　　必定程度上改變了網站原有的佈局結構，會出現用戶混淆的狀況

　　3、響應式佈局該怎麼設計?

　　咱們在上面瞭解了什麼是響應式佈局，那在咱們的實際項目中應該怎麼去設計呢?在以往咱們設計網站的時候都會受到不一樣瀏覽器的兼容性的困擾，如今還要 來個不一樣尺寸設備，咱們該怎麼淡定下來呢?有需求就會有解決方案，呵呵，說到響應式佈局，就不得不提起CSS3中的Media Query(媒介查詢)，這但是個好東西，易用、強大、快捷……Media Query是製做響應式佈局的一個利器，使用這個工具，咱們能夠很是方便快捷的製造出各類豐富的實用性強的界面。接下來就一塊兒來深刻的瞭解Media Query。

　　一、CSS中的Media Query(媒介查詢)是什麼?

　　經過不一樣的媒體類型和條件定義樣式表規則。媒體查詢讓CSS能夠更精確做用於不一樣的媒體類型和同一媒體的不一樣條件。媒體查詢的大部分媒體特性都接受 min和max用於表達」大於或等於」和」小與或等於」。如：width會有min-width和max-width媒體查詢能夠被用在CSS中的 @media和@import規則上，也能夠被用在HTML和XML中。經過這個標籤屬性，咱們能夠很方便的在不一樣的設備下實現豐富的界面，特別是移動設 備，將會運用更加的普遍。

　　二、media query可以獲取哪些值?

　　設備的寬和高device-width，device-heigth顯示屏幕/觸覺設備。

　　渲染窗口的寬和高width，heigth顯示屏幕/觸覺設備。

　　設備的手持方向，橫向仍是豎向orientation(portrait|lanscape)和打印機等。

　　畫面比例aspect-ratio點陣打印機等。

　　設備比例device-aspect-ratio-點陣打印機等。

　　對象顏色或顏色列表color，color-index顯示屏幕。

　　設備的分辨率resolution。

　　三、語法結構及用法

@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」/>

　　上面使用中only可省略，限定於計算機顯示器，第一個條件max-width是指渲染界面最大寬度，第二個條件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(而且最大可見寬度爲989px);屏寬在480px及其如下手持設備;屏寬在 480px以及橫向(即480尺寸平行於地面)放置的手持設備;屏寬大於或等於480px小於1024px以及垂直放置設備的css樣式。

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

　　四、可用設備名參數：

　　

 

　　五、邏輯關鍵字：

　　

 

　　六、可用設備名參數：

　　

 

　　七、測試Media Queries

　　最後，咱們須要對咱們剛剛設計的Media Queries進行測試，想要在不一樣設備上測試Media Queries的效果，可使用一個瀏覽工具來檢驗不一樣尺寸屏幕下的顯示效果，在這裏爲你們介紹一個不錯的在線工具 – Responsivator，它能夠模擬iPhone等各類不一樣設備，而且還能夠自定義不一樣尺寸屏幕的顯示效果，只須要輸入一個url甚至是本地的一個 url(如：http://127.0.0.1/)，就能夠看到網站在不一樣尺寸屏幕下的顯示效果。

　　八、經過Media Queries實現響應式佈局設計

　　好了，咱們明白了什麼是Media Query，那咱們一塊兒來運用到響應式佈局的設計項目中去。設計思路很簡單，首先先定義在標準瀏覽器下的固定寬度(假如標準瀏覽器的分辨率爲 1024px，那麼咱們設置寬爲980px)，而後用Media Query來監測瀏覽器的尺寸變化，當瀏覽器的分辨率小於1024px的時候，則經過Media Query預設的樣式表來將頁面的寬度設置爲百分比顯示，這樣子頁面的結構元素就會根據瀏覽器的的尺寸來進行相對應的調整。同理，當瀏覽器的可視區域改變 到某個值(假如爲650px)的時候，頁面的結構元素根據Media Query預設的層疊樣式表來進行相對應的調整。看看咱們的例子：

/* 當瀏覽器的可視區域小於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;}

}

　　經過上面咱們就能夠監測瀏覽器的可視區域變化的是時候咱們的頁面結構元素也會相對應的變化，固然你能夠再多設置幾個尺寸的監測層疊樣式表，這樣子就能夠根據不一樣尺寸設備來進行響應式的佈局。爲了更好的顯示效果，咱們每每還要格式化一些CSS屬性的初始值：

/* 禁用iPhone中Safari的字號自動調整 */

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;

}

　　最後要注意的是在頁面的頭部之間加上下面這句∶

<meta name=「viewport」 content=「width=device-width; initial-scale=1.0」>

　　meta viewport這個屬性是在移動設備上設置原始大小顯示和是否縮放的聲明。

　　參數設置∶

　　width – viewport的寬度

　　height – viewport的高度

　　initial-scale – 初始的縮放比例

　　minimum-scale – 容許用戶縮放到的最小比例

　　maximum-scale – 容許用戶縮放到的最大比例

　　user-scalable – 用戶是否能夠手動縮放

　　最後對於在IE瀏覽器中不支持media query的狀況，咱們可使用Media Query Javascript來解決，只須要在頁面頭部引用css3-mediaqueries.js便可。示例：

<！--［if lt IE 9］>

<ｓｃｒｉｐｔ src=「http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js」>

</ｓｃｒｉｐｔ> <！［endif］-->

　　好了，響應式佈局的小事就這麼多，如你有好的補充意見或不一樣的看法，能夠聯繫我，咱們一塊兒探討這件小事……

 

例子：

<head><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 讓頁面的寬度跟設備的寬度一致，不出現橫向滾動條--><title>自適應測試</title><style type="text/css">html,body{margin:0; padding:0;}div{display:block;}.content{width:1240px; margin: 0 auto;}.div{ width:600px;height:400px; margin: 10px;}#main1,#main3{float:left;}#main2,#main4{float:right;}@media screen and (max-width: 980px) {//設置寬度大於165小於980的時候，顯示兩列布局。    .content{width:100%;}    .div{width:45%;height:600px;margin: 10px;}    #main1,#main3{float:left;}    #main2,#main4{float:right;}}@media screen and (max-width: 650px) {//設備可見寬度小於650的時候，用流式佈局，爲了避免影響內容的顯示，只有一列布局。    .content{width:100%;}    .div{ width:auto;height:400px; margin: 10px;}    #main1,#main3{float:none;}    #main2,#main4{float:none;}}</style><!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--></head><body>    <div class="content">        <div id="main1"  style="background:red;" class="div"></div>        <div id="main2"  style="background:blue;" class="div"></div>        <div id="main3"  style="background:black;" class="div"></div>        <div id="main4"  style="background:yellow;" class="div"></div>    </div></body>