響應式佈局的開發基礎

 

• 第一：正確理解響應式佈局

  響應式網頁設計就是一個網站可以兼容多個終端-而不是爲每一個終端作一個特定的版本。打個比方來講：如今社會有不少響應產品，例如摺疊沙發，摺疊牀等等，當咱們須要把沙發放到一個角落的時候，此刻沙發就比如div吧，而角落裏的某個地方就比如父元素，因爲父元素空間的改變，咱們不得不調整div,讓它可以依然放在角落裏。在項目中你會遇到不一樣的終端，因爲終端分辨率不一樣，因此你要想讓用戶體驗更好，就必要讓你的頁面可以兼容多個終端。

  第二：響應式設計的步驟

  瞭解了什麼是響應式，那麼接下來咱們就要說說響應式設計的步驟，有人這時候會說「博主，你傻啊，響應式設計的步驟不就是1.編寫非響應式代碼、2.加工成響應式代碼、3.響應式細節處理、4.完成響應式開發嗎？」博主菊花一震 原來高手在民間啊，微微一硬表示敬重，我去 ，說錯了 是微微一笑，你們不要誤會啊。

言歸正傳，博主由於是刨根問底攔不組的，因此在此就往響應式設計的祖墳上刨，深刻了解下這四個步驟。

1.佈局及設置meta標籤

當建立一個響應式網站，或者非響應式網站變成響應式的時候，首先要關注元素的佈局。我在建立響應式佈局的時候習慣先寫非響應式佈局，頁面固定寬度大小，我以爲這個對在座的各位沒有任何難度。若是完成了非響應式那麼我在去添加媒體查詢（Media Query)和響應式代碼。這種操做更容易實現響應式特性。

當你完成當你已經完成了無響應的網站，作的第一件事是在你的 HTML 頁面，粘貼下面的代碼到和標籤之間。這將設置屏幕按1：1的尺寸顯示，在 iPhone 和其餘智能手機的瀏覽器提供網站全視圖瀏覽，並禁止用戶縮放頁面。

在head部分引入

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

<link rel="stylesheet" href="../bootstrap/css/help.css">

user-scalable屬性可以解決ipad切換橫屏以後觸摸才能回到具體尺寸的問題。
在body部分引入

<script src="../bootstrap/js/jquery-1.11.2-min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>

2.經過媒體查詢來設置樣式media query

media query 是響應式設計的核心，它可以和瀏覽器進行溝通，告訴瀏覽器頁面如何呈現，假如一個終端的分辨率小於980px，那麼能夠這樣寫

@media screen and (max-width:980px){ #head { … } #content { … } #footer { … } }這裏面的樣式會覆蓋掉以前所定義的樣式。

3.設置多種視圖寬度

假如咱們要兼容ipad和iphone視圖，咱們能夠這樣設置：

/**ipad**/ @media only screen and (min-width:768px)and(max-width:1024px){} /**iphone**/ @media only screen and (width:320px)and (width:768px){}

3.字體設置

到目前爲止，開發人員用到的字體單位大部分都是像素，雖然像素在普通網站上是Ok的，可是咱們仍然須要響應式字體。一個響應式的字體應關聯它的父容器的寬度，這樣才能適應客戶端屏幕。

css3引入了新的單位叫作rem,和em相似但對於Html元素，rem更方便使用。

rem是相對於根元素的，不要忘記重置根元素字體大小：

html{font-size:100%;} 完成後，你能夠定義響應式字體： @media (min-width:640px){body{font-size:1rem;}} @media (min-width:960px){body{font-size:1.2rem;}} @media (min-width:1200px){body{font-size:1.5rem;}} 不理解rem的童鞋，在這裏給你們推薦一篇寫的不錯的博客(http://www.cnblogs.com/YYvam1288/p/5123272.html)

最後咱們來總結下響應式佈局的實現原理

首先咱們應該遵循移動端優先，交互和設計以移動端爲主，pc則做爲移動端的擴展，一個頁面須要兼容不一樣終端，那麼有兩個關鍵點是咱們須要去作到響應式的：響應式佈局和響應式內容（圖片、多媒體）

　　　　　1.響應式圖片1.響應式佈局
           1.Meta標籤訂義 2.使用Media Queries適配對應樣式 2.響應式內容