理解響應式佈局設計
講到響應式佈局，相信你們都有必定的瞭解，響應式佈局是今年很流行的一個設計理念，隨着移動互聯網的盛行，爲解決現在各式各樣的瀏覽器分辨率以及不一樣移動設備的顯示效果， 設計師提出了響應式佈局的設計方案。今天就和你們分享一個響應式佈局，包含什麼是響應式佈局、響應式佈局的優勢和缺點以及響應式佈局該怎麼設計（經過CSS3 Media Query實現響應佈局）。
css
什麼是響應式佈局？html
響應式佈局是EthanMarcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站可以兼容多個終端——而不是爲每一個終端作一個特定的版本。這個概念是爲解決移動互聯網瀏覽而誕生的。css3
響應式佈局能夠爲不一樣終端的用戶提供更加溫馨的界面和更好的用戶體驗，並且隨着目前大屏幕移動設備的普及，用大勢所趨來形容也不爲過。隨着愈來愈多的設計師採用這個技術，咱們不只看到不少的創新，還看到了一些成形的模式。web
響應式佈局有哪些優勢和缺點？瀏覽器
優勢：ide
面對不一樣分辨率設備靈活性強svn
可以快捷解決多設備顯示適應問題工具
缺點：佈局
兼容各類設備工做量大，效率低下測試
代碼累贅，會出現隱藏無用的元素，加載時間加長
其實這是一種折衷性質的設計解決方案，多方面因素影響而達不到最佳效果
必定程度上改變了網站原有的佈局結構，會出現用戶混淆的狀況
響應式佈局該怎麼設計？
咱們在上面瞭解了什麼是響應式佈局，那在咱們的實際項目中應該怎麼去設計呢？在以往咱們設計網站的時候都會受到不一樣瀏覽器的兼容性的困擾，如今還要來個不一樣尺寸設備，咱們該怎麼淡定下來呢？有需求就會有解決方案，呵呵，說到響應式佈局，就不得不提起CSS3中的Media Query（媒介查詢），這但是個好東西，易用、強大、快捷……Media Query是製做響應式佈局的一個利器，使用這個工具，咱們能夠很是方便快捷的製造出各類豐富的實用性強的界面。接下來就一塊兒來深刻的瞭解Media Query。
1、CSS中的Media Query（媒介查詢）是什麼？
經過不一樣的媒體類型和條件定義樣式表規則。媒體查詢讓CSS能夠更精確做用於不一樣的媒體類型和同一媒體的不一樣條件。媒體查詢的大部分媒體特性都接受min和max用於表達」大於或等於」和」小與或等於」。如：width會有min-width和max-width媒體查詢能夠被用在CSS中的@media和@import規則上，也能夠被用在HTML和XML中。經過這個標籤屬性，咱們能夠很方便的在不一樣的設備下實現豐富的界面，特別是移動設備，將會運用更加的普遍。
2、media query可以獲取哪些值？
設備的寬和高device-width，device-heigth顯示屏幕/觸覺設備。
渲染窗口的寬和高width，heigth顯示屏幕/觸覺設備。
設備的手持方向，橫向仍是豎向orientation（portrait|lanscape）和打印機等。
畫面比例aspect-ratio點陣打印機等。
設備比例device-aspect-ratio-點陣打印機等。
對象顏色或顏色列表color，color-index顯示屏幕。
設備的分辨率resolution。
3、語法結構及用法
1
@media 設備名only （選取條件）not （選取條件）and（設備選取條件），設備二{sRules}
示例一：在link中使用@media：
1
<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：
1
@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基本語法。
4、可用設備名參數：
5、邏輯關鍵字：
7、測試Media Queries
最後，咱們須要對咱們剛剛設計的Media Queries進行測試，想要在不一樣設備上測試Media Queries的效果，可使用一個瀏覽工具來檢驗不一樣尺寸屏幕下的顯示效果，在這裏爲你們介紹一個不錯的在線工具– Responsivator，它能夠模擬iPhone等各類不一樣設備，而且還能夠自定義不一樣尺寸屏幕的顯示效果，只須要輸入一個url甚至是本地的一個url（如：http://127.0.0.1/），就能夠看到網站在不一樣尺寸屏幕下的顯示效果。
8、經過Media Queries實現響應式佈局設計
好了，咱們明白了什麼是Media Query，那咱們一塊兒來運用到響應式佈局的設計項目中去。設計思路很簡單，首先先定義在標準瀏覽器下的固定寬度（假如標準瀏覽器的分辨率爲1024px，那麼咱們設置寬爲980px），而後用Media Query來監測瀏覽器的尺寸變化，當瀏覽器的分辨率小於1024px的時候，則經過Media Query預設的樣式表來將頁面的寬度設置爲百分比顯示，這樣子頁面的結構元素就會根據瀏覽器的的尺寸來進行相對應的調整。同理，當瀏覽器的可視區域改變到某個值（假如爲650px）的時候，頁面的結構元素根據Media Query預設的層疊樣式表來進行相對應的調整。看看咱們的例子：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 當瀏覽器的可視區域小於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屬性的初始值：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 禁用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;
}
最後要注意的是在頁面的頭部<head></head>之間加上下面這句∶
1
<meta name=「viewport」content=「width=device-width; initial-scale=1.0」>
metaviewport這個屬性是在移動設備上設置原始大小顯示和是否縮放的聲明。
參數設置∶
width– viewport的寬度
height– viewport的高度
initial-scale– 初始的縮放比例
minimum-scale– 容許用戶縮放到的最小比例
maximum-scale– 容許用戶縮放到的最大比例
user-scalable– 用戶是否能夠手動縮放
最後對於在IE瀏覽器中不支持media query的狀況，咱們可使用Media Query JavaScript來解決，只須要在頁面頭部引用css3-mediaqueries.js便可。示例：
1
2
3
<！--［if lt IE 9］>
<scriptsrc=「http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js」></script>
<！［endif］-->
- 1. 響應式佈局設計
- 2. 響應示佈局設計
- 3. 什麼是響應式佈局設計？
- 4. HTML的響應式佈局設計
- 5. Responsive響應式佈局設計
- 6. html5 + css3 + jQuery + 響應式佈局設計
- 7. WinForm響應式佈局設計實踐
- 8. Web響應式佈局設計簡介
- 9. 理解響應式設計。
- 10. 響應式佈局講解
- 更多相關文章...
- • ASP.NET MVC - 樣式和佈局 - ASP.NET 教程
- • Web 創建設計 - 網站建設指南
- • IntelliJ IDEA代碼格式化設置
- • 常用的分佈式事務解決方案
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. No provider available from registry 127.0.0.1:2181 for service com.ddbuy.ser 解決方法
- 2. Qt5.7以上調用虛擬鍵盤(支持中文)，以及源碼修改(可拖動，水平縮放)
- 3. 軟件測試面試- 購物車功能測試用例設計
- 4. ElasticSearch（概念篇）：你知道的, 爲了搜索…
- 5. redux理解
- 6. gitee創建第一個項目
- 7. 支持向量機之硬間隔（一步步推導，通俗易懂）
- 8. Mysql 異步複製延遲的原因及解決方案
- 9. 如何在運行SEPM配置嚮導時將不可認的複雜數據庫密碼改爲簡單密碼
- 10. windows系統下tftp服務器使用
- 1. 響應式佈局設計
- 2. 響應示佈局設計
- 3. 什麼是響應式佈局設計？
- 4. HTML的響應式佈局設計
- 5. Responsive響應式佈局設計
- 6. html5 + css3 + jQuery + 響應式佈局設計
- 7. WinForm響應式佈局設計實踐
- 8. Web響應式佈局設計簡介
- 9. 理解響應式設計。
- 10. 響應式佈局講解