響應式開發

爲何使用響應式

移動設備在打開頁面時，瀏覽器爲了能將整個頁面寬度的內容都顯示，默認會將頁面進行縮小，致使內容太小。用戶體驗極差。

若是一個網站要同時兼顧pc端頁面和移動端頁面，有三種方式：

1.PC端頁面和移動端頁面分別設計開發，在服務器接受請求時，判斷請求設備的類型，根據不一樣的類型返回不一樣的頁面。

2.自適應的方案：自適應是在不一樣大小和分辨率的設備上呈現一樣的網頁。也就是說，網頁內容和佈局徹底同樣，不一樣的只是內容的尺寸。是按百分比作寬度佈局。寬度使用百分比，文字使用em或rem。缺點：若是設備過小，就算網頁可以根據屏幕大小進行適配，可是在過小屏幕顯示內容過多會看不清楚，從而極大損害用戶體驗。

3.響應式頁面佈局：網頁內容和佈局隨着屏幕尺寸變化而變化。對於同一個頁面，若是用響應式佈局來處理的話，用不一樣設備去訪問此頁面，最後看到的佈局和內容有很大不一樣。

響應式的實現

1.在網頁代碼的頭部，加入viewport meta標籤。

則須要viewport視口設置，告訴瀏覽器沒必要再縮小頁面，同時也告訴頁面當前設備寬度，讓頁面（視口）和設備寬度等寬：

<meta name="viewport" content="width=device-width, initial-scale=1.0,userscalable=no">e

標籤的相關屬性：

width=device-width：讓頁面的寬度（視口）等於設備寬度。width也能夠指定一個具體值。

height：與width相對應，指定高度。

initial-scale：設置初始縮放比例，當頁面第一次load的時候的縮放比例。爲1時不縮小也不放大。

maximum-scale：容許用戶縮放到的最大比例。

minimum-scale：容許用戶縮放到的最小比例。

user-scalable：用戶是否能夠手動縮放。user-csalable=no用戶不能手動縮放。

2.容許網頁寬度自動調整。

3.儘可能少使用絕對寬度。

不要使用像素寬度，經過指定百分比寬度或者rem，em來替代，同時還能夠配合css的cal，進行計算寬度。

4.相對大小的字體。

字體不要使用px寫死，最好使用相對大小的em或者rem。

5.使用相對單位

1）vw是相對於視口的寬度。視口被均分爲100單位的vw。

2）vh與vw類似，相對於瀏覽器視窗高度。

3）em是相對於使用em單位的那個元素的字體大小。

       是em值乘以使用em單位的元素的字體大小。有一個比較廣泛的誤解，認爲 em 單位是相對於父元素的字體大小。 事實上它們是相對於使用em單位的元素的字體大小。父元素的字體大小能夠影響 em 值，是由於每一個元素將自動繼承其父元素的字體大小。繼承效果只能被明確的字體單位覆蓋，好比px,vw。 所以，以 em 爲單位的元素字體大小可能會受到其任何父元素的字體大小影響。

4）rem表示相對於根元素（html）的字體大小。

      rem 單位翻譯爲像素值是由 html 元素的字體大小決定的，例如根元素的字體大小 16px，10rem 將等同於 160px。此字體大小會被瀏覽器中字體大小的設置影響，默認狀況下瀏覽器一般字體大小 16px，根 html 元素將繼承瀏覽器中設置的字體大小，除非顯式設置固定值去覆蓋。當 em 單位設置在 html 元素上時，它將轉換爲em值乘以瀏覽器字體大小的設置。例如，若是網站的 html 元素的字體設置爲 1.25em，若是瀏覽器字體大小被設置爲 16px，那麼根字體大小會爲 20px，即 1.25 x 16 =20px。

      rem 單位的優秀不只僅是他們提供一致尺寸而不是繼承，還有它給咱們的一個途經去獲取用戶的偏好來影響網站中每一處使用rem的元素大小，再也不是使用固定的 px 單位。爲此，使用 rem 單位的主要目的應該是確保不管用戶如何設置本身的瀏覽器，咱們的佈局都能調整到合適大小。所以給html元素設置一個固定的px單位這種很廣泛的作法，剝削了用戶自行調整以得到最佳視覺效果的能力。若是確實須要更改 html 元素的字體大小，那麼就使用em，rem單位，這樣根元素的值還會是用戶瀏覽器字體大小的乘積。

      使用rem單位，除非你肯定你須要 em 單位，偶爾也會使用em單位容許保持在一個特定的設計元素範圍內的可擴展性。由於em單位取決於一個font-size值而非 html 元素的字體大小。

 

6.流式佈局

float的好處是，若是寬度過小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢出），避免了水平滾動條的出現。

7.@media媒體查詢

@media 能夠針對不一樣的屏幕尺寸設置不一樣的樣式。

使用方式

mediatype:媒體類型。media feature: 媒體功能。

1.外聯樣式：

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
<!-- 實例 -->
<link rel="stylesheet" href="index.css" media="only screen and (max-width:640px)">

2.內嵌樣式：

@media mediatype and|not|only (media feature) {
    CSS-Code;
}
/*實例*/
@media screen and (min-width:640px){
    body{
        background-color: orange;
    }
}

經常使用媒體功能：

設備寬高：device-width,device-height;

渲染窗口的寬高：width,height;

手持方向：orientation

設備分辨率：resolution

8.圖片

圖片和背景也要響應式的調整大小。

1）img標籤裏的圖片：width 屬性設置爲 100%，圖片會根據上下範圍實現響應式功能。可是可能會比原始尺寸大，形成圖片變形。能夠利用max-width 屬性解決這個問題。max-width 屬性設置爲 100%, 圖片永遠不會大於其原始大小。實現圖片的自動縮放。這隻要一行CSS代碼：

img { max-width: 100%;}

但最好仍是根據不一樣大小的屏幕，加載不一樣分辨率的圖片。

2）背景圖片：

1. 若是 background-size 屬性設置爲 "100% 100%" ，背景圖片將延展覆蓋整個區域。

2. 若是 background-size 屬性設置爲 "contain",  高度撐滿，圖片保持其比例不變，按比例自適應內容區域。

3. 若是 background-size 屬性設置爲"cover"，寬度撐滿，圖片保持其比例不變，按比例自適應內容區域。

4.有時候，咱們沒有必要在小屏幕上去加載大圖片，這樣很影響加載速度。可使用媒體查詢，根據不一樣的設備顯示不一樣的圖片。

9.bootstrap

 Bootstrap 是響應式 Web 設計的框架。

引用

使用bootstrap至少要引入三個文件，bootstrap.css，jquery.js，bootstrap.js，兩個js文件的導入有前後順序。

柵格系統

1. bootstrap 中有兩種容器，分別是 container 和 container-fluid 。這兩種容器中可使用柵格系統進行橫向佈局。

2. 在柵格系統中，一個容器縱向被分爲12列，容器中的元素能夠設置class標明本身佔多少列。任何一個元素均可以再次做爲容器，使用柵格系統，柵格系統能夠嵌套。

3. 柵格系統將屏幕尺寸分爲4個等級，lg,md,sm,xs。

lg：大於等於1200px; md:大於等於992px；sm:大於等於768px; xs:小於768px;

栗子：col-lg-3 表示本元素在大屏幕下佔3列。

<main class="container">
    <div class="box col-lg-3 col-md-4 col-sm-6"></div>
    <div class="box col-lg-3 col-md-4 col-sm-6"></div>
    <div class="box col-lg-3 col-md-4 col-sm-6"></div>
    <div class="box col-lg-6 col-md-4 col-sm-6"></div>
    <div class="box col-lg-6 col-md-12 col-sm-6 container">
        <div class="lit box col-lg-3 col-md-4 col-sm-6"></div>
        <div class="lit box col-lg-3 col-md-4 col-sm-6"></div>
        <div class="lit box col-lg-3 col-md-4 col-sm-6"></div>
        <div class="lit box col-lg-3 col-md-4 col-sm-6"></div>
    </div>
</main>