響應式佈局

㈠定義

響應式佈局：Responsive  Web Design，意在實現不一樣屏幕分辨率的終端上瀏覽網頁的不一樣展現方式。經過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。

 

㈡優勢 

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

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

 

㈢缺點

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

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

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

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

 

㈣什麼是 Viewport?

⑴viewport 是用戶網頁的可視區域。

⑵viewport 翻譯爲中文能夠叫作"視區"。

⑶手機瀏覽器是把頁面放在一個虛擬的"窗口"（viewport）中，一般這個虛擬的"窗口"（viewport）比屏幕寬，這樣就不用把每一個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的佈局），用戶能夠經過平移和縮放來看網頁的不一樣部分。

 

㈤設置 Viewport 

設置 Meta 標籤

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

• width：控制 viewport 的大小，能夠指定的一個值，如 600，或者特殊的值，如 device-width 爲設備的寬度（單位爲縮放爲 100% 時的 CSS 的像素）。
• height：和 width 相對應，指定高度。
• initial-scale：初始縮放比例，也便是當頁面第一次 load 的時候縮放比例。
• maximum-scale：容許用戶縮放到的最大比例。
• minimum-scale：容許用戶縮放到的最小比例。
• user-scalable：用戶是否能夠手動縮放。

 

㈥css3中的Media Query（媒介查詢）是什麼？

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

 

㈦media query可以獲取哪些值？

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

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

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

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

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

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

⑺設備的分辨率resolution。

 

㈧語法結構及用法

⑴@media 設備名 only （選取條件） not （選取條件） and（設備選取條件），設備二{sRules}

示例1：在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是指設備最大寬度。

 

⑵示例2：在樣式表中內嵌@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（排除某種設備）爲邏輯關鍵字，多種設備用逗號分隔。

 

㈨相關數據

⑴可用設備參數

 

⑵邏輯關鍵字

 

⑶可用設備名參數

 

㈩響應式佈局設計

⑴ 首先須要在頁面頭部引入這行meta代碼，以下：

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1, user-scalable=0" />

而後還要引入這一句：

 <meta content="telephone=no,email=no" name="format-detection" />

咱們的代碼有相似於電話這樣的數字的時候，由於有的手機上它會自動轉換成能夠撥打電話，因此咱們加上這句就不會了。

 

⑵響應性web設計須要使用css3媒體查詢media來寫不一樣的css樣式。

在移動端瀏覽器中或者某些桌面瀏覽器中，window對象有一個devicePixelRatio屬性，它的官方定義爲，設備的物理像素與設備的獨立像素的比例，也就是 devicePixelRatio = 設備的物理像素/ 設備的獨立像素。這三個參數不是固定的，只要其中2個肯定了，那麼就能夠知道第三個參數了，設備的物理像素咱們能夠映射到設備的分辨率的寬度，獨立像素咱們能夠映射到媒體查詢media定義的寬度。而比列devicePixelRatio咱們能夠理解爲css中的1像素(px)在設備上佔用多少個物理像素。

⑶使用@media 的三種方式

①第一： 直接在CSS文件中使用

@media 類型 and (條件1) and (條件二) { css樣式 } @media screen and (max-width:980px ) { body{ background-color: red; } }

 

②第二：使用@import導入

@import url("css/moxie.css") all and (max-width:980px);

 

③第三，也是最經常使用的：使用link鏈接，media屬性用於設置查詢方式

<link rel="stylesheet" type="text/css" href="css/moxie.css" media=「all and (max-width=980px)」/>

 

⑷格式化一些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; }

 

⑸一些須要注意的地方

①寬度須要使用百分比

例如： #head { width: 100% } #content { width: 50%; }

 

②處理圖片縮放的方法

•簡單的解決方法可使用百分比，但這樣不友好，會放大或者縮小圖片。那麼能夠嘗試給圖片指定的最大寬度爲百分比。假如圖片超過了，就縮小。假如圖片小了，就原尺寸輸出。

例如：img { width: auto; max-width: 100%; }

•用::before和::after僞元素 +content 屬性來動態顯示一些內容或者作其它很酷的事情，在 css3 中，任何元素均可以使用 content 屬性了，這個方法就是結合 css3 的 attr 屬性和 HTML 自定義屬性的功能： HTML 結構：

<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="" >

•CSS 控制：

@media (min-device-width:600px) { img[data-src-600px] { content: attr(data-src-600px, url); } } @media (min-device-width:800px) { img[data-src-800px] { content: attr(data-src-800px, url); } }

 

③其餘屬性

例如 pre ，iframe，video 等，都須要和img同樣控制好寬度。對於table，建議不要增長 padding 屬性，低分辨率下使用內容居中：·

table th, table td { padding: 0 0; text-align: center; }

 

④理解css單位px，em，rem的區別：

1.  Px是css中最基本的長度單位，在PC端，設計稿多少像素，頁面css就寫多少像素。

2.  em 是相對單位，相對於上下文元素而言，通常狀況下，瀏覽器默認的字體大小是16px，也就是1em等於16px；好比：

3. rem也是相對單位。rem是相對於html根元素來計算的，這就是說只要在根節點設定好參考值，那麼全篇的1rem都相等，計算方式同 em，默認1rem=16px; 同理你能夠 設定html { font-size:62.5% } 那麼1rem就等於10px，以此類推。。。

好比設置html根元素 以下代碼：

html {font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/}

當一個p元素是24px的話，那麼轉換成rem爲單位的話，那麼只須要以下這樣寫便可：

p {font-size: 2.4rem; /*2.4 × 10px = 24px */ }

 

⑤元素未知寬度居中

•第一種方法：

假如頁面html結構以下：

<div> <p>What is CSS?</p> </div>

 

只須要給父級元素div 設置 文本對齊是 居中對齊。子元素設定display:inline-block便可。以下代碼：

div{text-align:center} p{display:inline-block}

 

第二種方法以下：

div{position:relative; left:50%; float:left;} p{position:relative; left:-50%;}

 

⑥媒體查詢標準寫法：media queries

@media 設備類型 and (設備特性-寬度) { // css 樣式 }

 

案例

HTML代碼：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>響應式佈局</title> <meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no" /> <meta name="format-detection" content="telephone=no,email=no"/> <link rel="stylesheet" type="text/css" href="css/mo2.css"/> </head> <body> <div> <header id="head"> <ul> <li>header1</li> <li>header2</li> <li>header2</li> <li>header2</li> <li>header2</li> </ul> <div>icon</div> </header> <section id="main"> <div class="left"> left </div> <div class="center"> center </div> <div class="right"> right </div> </section> <footer id="foot"> footer </footer> </div> </body> </html>

CSS代碼：

*{ margin: 0px; padding: 0px; font-family: "微軟雅黑"; } #head, #foot, #main { height: 100px; width: 1200px; /*width: 85%;*/ background-color: goldenrod; text-align: center; font-size: 48px; line-height: 100px; margin: 0 auto; } #head div{ display: none; font-size: 20px; height: 30px; width: 100px; background-color: green; float: right; line-height: 30px; margin-top: 35px; } #head ul{ width: 80%; } #head ul li{ width: 20%; float: left; text-align: center; list-style: none;font-size: 20px; } #main{ height: auto; margin: 10px auto; overflow: hidden; } .left, .center, .right{ height: 600px; line-height: 600px; float: left; width: 20%; background-color: red } .center{ width: 60%; border-left: 10px solid #FFF; border-right: 10px solid #FFF; box-sizing: border-box; } @media only screen and (max-width: 1200px) { #head, #foot, #main{ width: 100%; } } @media only screen and (max-width: 980px) { .right{ display: none; } .left{ width: 30%; } .center{ width: 70%; border-right: hidden; } } @media only screen and (max-width: 640px) { .left, .center, .right{ width: 100%; display: block; height: 200px; line-height: 200px; } .center{ border: hidden; border-top: 10px solid #FFFFFF; border-bottom: 10px solid #FFFFFF; height: 600px; line-height: 600px; } #head ul{ display: none; } #head div{ display: block; } }

 

效果圖：

⑴窗口大於1200px時顯示的樣子

 

⑵ 窗口小於1200大於980時，只會被壓縮，並不會發生其餘變化

⑶當大於640小於980時，右側欄隱藏

⑷當小於640時，導航欄摺疊，body三部分豎直排列顯示，若窗口持續縮小，不在發生變化，區域被壓縮

 

參考：⑴http://caibaojian.com/356.html

          ⑵http://www.javashuo.com/article/p-uwvzryzh-ek.html

          ⑶http://www.javashuo.com/article/p-peadpvcj-cs.html

          ⑷https://baike.baidu.com/item/響應式佈局/1220833?fr=aladdin