前端【響應式】開發詳細解析

1、響應式設計須要解決的問題是什麼？

針對目前你們常見的固定佈局、自適應佈局都是一種反應遲鈍的web設計，當Web頁面須要在各類顯示屏顯示時，他們就顯得力不從心了。所以，咱們就須要相應設計。

優點：

一個頁面適應各類顯示屏；

具備良好的SEO；

較大縮短開發週期；

給用戶更多的選擇，更好的用戶體驗；

2、響應式包含哪些部分？

在學習響應式設計時，咱們須要知道如下幾個常見的術語。

一、流體網格

一個簡單的網格系統，將每一個格子使用百分比單位來控制網格大小，其優點是網格隨着屏幕大小做出對於的比例縮放。

二、彈性圖片

彈性圖片是指不給圖片設置固定尺寸，而更具流體網格進行縮放來適應不一樣的尺寸。實現方法以下代碼：

img{

max-width:100%;

}

注：IE8中會使圖片不顯示，因此需在IE8中增長對於hack樣式。

三、CSS3 Media Queries

它是響應式設計最關鍵的一個應用，它能夠根據瀏覽器窗口的大小、方向、屏幕規格選擇對於的樣式文件。

四、屏幕分辨率

所謂屏幕分辨率是指：分辨率是1920設備像素*1080設備像素，在縱向上排列了1080個顯像用的小點，在橫向上排列了1920個顯像用的小點，同一尺寸的屏幕下，分辨率越高（橫向、縱向上的顯像點越多越小）屏幕越清晰。

問題：在高清屏和普通屏下，css的100px展現會不會有差別？

答案是：不會有差別!

在普通的屏幕下1px佔用一個設備像素，而在高清屏幕下（如蘋果的視網膜屏）1px佔用2個設備像素。以iphone6來講物理像素是750 * 1334，由於是高清屏幕，因此用px來度量的話就是 375px * 667px。這個能夠在chrome瀏覽器的調試模式下查看。

五、主要斷點

斷點是爲min-width和max-width服務的。@media (min-width:320px){}

3、One More Thing？

一、自適應佈局盒響應式佈局區別

自適應佈局：就是咱們常見的百分比佈局，它可讓你的佈局在不一樣分辨率下適應其大小，但這種佈局須要一個最小寬度來輔助實現，否則在必定尺寸下，整個佈局會亂掉，只不過這種不固定值是%而不是px。

響應式佈局：是一個多列流體佈局，其利用的是媒體查詢來實現web頁面在不一樣分辨率下的完美呈現，和自適應佈局仍是有本質上的差異。

二、em在響應式設計中的運用

em和font-size優很大關係，它也是css的一個度量單位，不過它比px更適合響應式設計，他能讓你的斷點根據字號大小來調整其值。

20em = 20 * 16 = 320px

30em = 30 * 16 = 480px

@media only screen and (min-width : 20em) {}

@media only screen and (min-width : 30em) {}

三、經常使用css單位

經常使用有三種：px em %

px：瀏覽器的度量單位，相對於物理像素，1px在高清屏幕下可能佔用2個物理像素、甚至3個物理像素。

em：相對於父元素的font-size，如父元素font-size設置爲16px，子元素font-size設置爲0.75em，那麼轉換爲px就是0.75 * 16px = 12px;

%：相對於父元素的長度高度，position:fixed 、absolute 除外（fixed將相對於窗口、absolute相對於遞歸父元素知道 第一個設置了position的元素）

rem：相對於根節點(通常爲html節點)的font-size，若是html節點設置font-size = 100px，那麼文檔中的元素設置爲0.3rem，則計算爲：0.3 * 100px = 30px

vh/vw：相對於設備的可視範圍，在移動端中常常會用到，好比：設計師常常要求，banner佔滿首屏高度既：100vh。如iphone6 （375px * 677px）= (100vw * 100vh) ，而iphone6 plus （414px * 736px） = (100vw * 100vh) 兩種屏幕下的vw、vh是不同的。

clac：css3中的長度計算語法，支持+、-、*、/的計算。

4、響應式設計關鍵三步

第一步、設置meta標籤

使用設備的寬度爲視圖的寬度，禁止默認的自適應頁面的效果，禁止縮放效果。以下：

 

因爲IE6-IE8不支持響應式設計，因此需增長相應插件來支持respond.js或者media-queries.js，以下：

 

<!--[if lt IE9]>

<script src='http://xxx/response.js'></script>

<![end]-->

第二步、HTML MarkUp

基礎通常會包括：頭部、導航、內容、頁腳。

第三步、媒體查詢

一、通常用min-width和max-width來檢查各類設備的分辨率大小

@media screen and (min-width : 768px) {}

@media screen and (max-width : 1024px) {}

@media screen and (min-width : 768px)  and (max-width : 1024px) {}

二、設備寬度device-width主要用在蘋果產品上

@media screen and (min-device-width : 768px)  and (max-device-width : 1024px) {}

三、調用獨立樣式表

經常使用模板：

1024px顯示屏：@media screen and (max-width : 1024px) {}

ipad橫屏：@media screen and (max-device-width : 1024px) and (orientation:landscape) {}

ipad豎屏：@media screen and (max-device-width : 768px) and (orientation:portrait) {}

iphone和smartPhone:@media screen and (min-width : 320px)  and (max-width : 480px) {}

大屏幕、中屏幕、小屏幕的劃分：

小屏幕：<769px；@media only screen and (min-width : 769px) {}

中屏幕：769~1366px或者769~1440px；@media only screen and (min-width : 769px) and (max-width:1366px){}

大屏幕：1366~1920px；@media only screen and (min-width : 1367px) {}

---

更多視頻教程請關注微信公衆號！！！！！！！