響應式佈局和移動端開發

響應式佈局

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

l 響應式佈局能夠爲不一樣終端的用戶提供更加溫馨的界面和更好的用戶體驗，並且隨着目前大屏幕移 動設備的普及，愈來愈多的設計師採用這個技術。

l 一個典型的響應式佈局網站：http://www.16ketang.com/

l 試着逐漸縮小該頁面的窗口，看看網頁有什麼變化

l 因爲響應式佈局要針對不一樣的視口尺寸，對樣式做出更多的修改，所以並不像流式佈局那樣讓寬度 自動適應那麼簡單。

l 實現響應式佈局最核心的技術就是使用媒體查詢（media selector）。

l 媒體查詢是CSS3引入的概念，是指針對不一樣的設備、不一樣的視口尺寸，使用不一樣的樣式代碼。

l 響應式佈局的原理，正是大量的使用媒體查詢，讓頁面中一些元素在不一樣的視口中具備不一樣的樣式 表現。

l 常見的視口尺寸

l 雖然你如今知道了如何使用媒體查詢，但咱們真正關心的，是頁面在手機、平板、上網本或小型筆 記本、PC端中具備更好的表現力。

l 但問題是手機型號衆多，其餘設備也是如此，它們的尺寸不盡相同，咱們如何來斷定當前的視口尺 寸屬於什麼設備呢？

l 好在通過大量的實踐應用，開發者已經總結了一套廣泛的適用規則，按照這套規則，你就能夠將視 口尺寸和具體設備對應起來。

l 視口尺寸和設備關係表

視口                設備

≥1200px            大屏幕：投影儀 電視 PC端

≥992px && <1200px   中等屏幕：上網本、小型筆記本

≥768px && <992px    小屏幕：平板

<768px              超小屏幕：手機

l 根據上述的關係表，再結合你網站的實際狀況，就能夠很容易的得出你須要編寫的媒體查詢代碼。

l 好比，個人網站只考慮兩種狀況：

1. 手機端顯示一種風格 2. 其餘設備共享一種風格

l 在Sass中使用媒體查詢

l 開發一個實際的項目時，咱們一般會選擇一些預編譯器來處理咱們編寫的CSS源代碼，好比 SASS。不少預編譯器都對媒體查詢有很好的支持。

l Sass 中 @media 指令與 CSS 中用法同樣，只是增長了一點額外的功能：容許其在 CSS 規則中嵌 套。若是 @media 嵌套在 CSS 規則內，編譯時，@media 將被編譯到文件的最外層，包含嵌套的 父選擇器。這個功能讓 @media 用起來更方便，不須要重複使用選擇器，也不會打亂 CSS 的書寫 流程。

開發移動端頁面

l 實際上，開發移動端頁面，和開發一個普通的頁面並無本質的區別。只不過移動端獨有 的一些特性，須要咱們在開發時特別關注。這些特性包括：

1. 移動端的視口寬度問題 2. 移動端誤觸形成的縮放問題 3. 移動 端元素的尺寸問

移動端的視口寬度問題

l 視口是指瀏覽器的可視區域，移動端的視口究竟是多寬呢？

l 如今市面上的大部分手機，好比iphone X，它的默認視口寬度爲980px，而一個iphone X的屏幕寬 度僅僅爲375px。看到問題了嗎？一個寬度只有375像素的手機，卻可以顯示寬度爲980像素的網 頁，天然而然，網頁會被縮小。

l 咱們可使用谷歌瀏覽器的移動端調試工具，來訪問百度的搜索結果，能夠看到網頁明顯被縮小 了，並且頁面寬度定格在980px。

l 在HTML給咱們提供了一個關鍵字 device-width ，該關鍵是讀取當前移動設備的寬度。所以， 咱們只須要使用下面的代碼，便可讓全部移動設備的視口寬度和其自身的寬度相等:

<meta name="viewport" content="width=device-width">

這樣就解決了移動端視口寬度和自身寬度不一致的問題。

移動端誤觸形成的縮放問題

l 當用戶用手指在移動端滑動網頁的時候，手機每每提供下面的功能：

1. 快速雙擊，可放大頁面 2. 雙指收放，可放大縮小頁面

l 因爲移動端誤觸較多，而咱們的網頁原本就是專門爲移動端開發的，不管是尺寸仍是各類樣式，在 默認的狀況下已經很是合適了，根本不須要用戶去縮放網頁（你會發現，幾乎全部app中的頁面， 都是不容許縮放的），所以，禁止用戶對網頁進行縮放是一個不錯的選擇。

l 具體的作法是在上一節中的 meta 元素中繼續加入內容：

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

l initial-scale=1.0 ：初始縮放比例爲1.0（原始大小），這句代碼的目的還不是放置用戶 縮放的，書寫上它有其餘複雜的緣由，不過本文不涉及

l minimum-scale=1.0 ：網頁小的縮小比例爲1.0（原始大小），設置這句代碼的目的是爲 了放置某些程序（好比JS）無心中修改了網頁的縮小比例

l maximum-scale=1.0 ：網頁大的放大比例爲1.0（原始大小），設置這句代碼的目的是爲 了放置某些程序（好比JS）無心中修改了網頁的放大比例

l user-scalable=0 ：這句代碼纔是不容許用戶對網頁進行縮放

移動端元素的尺寸問題

l 網頁中的不少元 素，隨着視口的寬度變大，尺寸也會隨之變大，不管是字體、高度、間隙都有這樣的特色。

l 當遇到字體大小、寬高、margin、padding等尺寸 類的屬性時，不能設置固定的像素值。

l 這段js代碼能夠實現轉換rem值：

!(function(win, doc) {     function setFontSize() {         var winWidth = window.innerWidth;

        doc.documentElement.style.fontSize = (winWidth / 設計 稿寬度) * 比例 + 'px';     }     var evt = 'onorientationchange' i n win ? 'orientationchange' : 'resiz e';     var timer = null;      win.addEventListener(evt, function() {         clearTimeout(timer);

        timer = setTimeout(setFontSize, 300);     }, false);     win.addEventListener("pageshow", function(e) {         if (e.persisted) {             clearTimeout(timer);             timer = setTimeout(setFontSize, 300);         }     }, false);     //初始化     setFontSize(); }(window, document));

將

 css中的全部像素值變化爲使用rem單位

l 咱們知道，rem單位是相對於根元素html字體大小的（若是根元素沒有設置字體大小，則相對於基 準字號）。而如今，根元素的字體大小，正好反映了視口的寬度。

l 因而，咱們只須要將各類尺寸的值，使用rem做爲單位，就能夠適應視口寬度的變化了。

l 具體怎麼設置呢，很是的簡單，一個元素某個尺寸的rem值公式以下：rem值 = 設計稿中的尺寸 / 100

l 好比，設計稿中某個元素的寬度爲100像素，那麼應該設置它的寬度爲 1rem ，這樣一來，當視口 尺寸等於設計稿尺寸1080時，根元素的字體大小爲 (1080/1080)*100 = 100px ，它的寬度 爲 1rem = 100px ；若是視口尺寸變小了，好比變成了375，那麼根元素的字體大小爲 (375/1080)*100 = 34.72px ，那麼它的寬度爲 1rem = 34.72px 。這樣就完美的和設計稿比例 一致了。

l 固然，在移動端，若是你使用了背景圖（好比雪碧圖），記得用一樣的方式調整背景圖的尺寸。