day 18

一、響應式的概念

2010年5月，由國外著名網頁設計師 Ethan Marcotte 所提出。

響應式是為了在不同的螢幕解析度下，實現不同的顯示方式

二、技術要點

1、標籤設定

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<!-- 如果可能，呼叫 chome 核心，或者高版本的 IE 核心 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 相容不支援 viewport 的裝置 -->
<meta name="HandheldFriendly" content="true"> 
 

2、使用媒體查詢適配不同樣式

一般會根據使用者的設定尺寸適配三到四種方式

（1）移動端優先

先寫好移動端使用的樣式，然後使用媒體查詢往大的螢幕進行適配

/*超小型裝置（手機，768px以下）*/
@media screen and (min-width:768px) { ... } /* 小型裝置（平板電腦，768px 以上） */
@media screen and (min-width:992px){ ... }/* 中型裝置（臺式電腦，992px 以上） */
@media screen and (min-width:1200px){ ... }/* 大型裝置（大臺式電腦，1200px 以上） */

例如：

 /* 移動端優先 */
/* 超小螢幕 */
p {
    width: 300px;
    height: 50px;
    background-color: aqua;
}
/* 小型裝置 */
@media screen and (min-width: 768px) {
    p {
        width: 500px;
        height: 60px;
        background-color: pink;
    }
}
/* 中型裝置 */
@media screen and (min-width: 992px) {
    p {
        width: 700px;
        height: 70px;
        background-color: yellow;
    }
}
/* 大型裝置 */
@media screen and (min-width: 1200px) {
    p {
        width: 800px;
        height: 80px;
        background-color: red;
    }
}
 

（2）大屏優先

先寫好大屏下的樣式，然後通過媒體查詢往小螢幕下進行適配

/*大屏下的樣式*/
@media screen and (max-width:1200px) { }   /*適配中等螢幕*/
@media screen and (max-width:992px) { }   /*適配小螢幕*/
@media screen and (max-width:768px) { }   /*適配超小螢幕*/

例如：

/* 大屏樣式 */
p {
    width: 1000px;
    height: 100px;
    background-color: aqua;
}
/* 適配中等螢幕 */
@media screen and (max-width: 1200px) {
    p {
        width: 800px;
        height: 80px;
        background-color: pink;
    }
}
/* 適配小螢幕 */
@media screen and (max-width: 992px) {
    p {
        width: 600px;
        height: 60px;
        background-color:blue;
    }
}
/* 適配超小螢幕 */
@media screen and (max-width: 768px) {
    p {
        width: 400px;
        height: 40px;
        background-color: tomato;
    }
}

3、響應式字型設定

rem

到目前為止，開發人員用到的字型單位大部分都是畫素，雖然畫素在普通網站上是可以的，但是我們仍然需要響應式字型。一個響應式的字型應關聯它的父容器的寬度，這樣才能適應客戶端螢幕。css3引入了新的單位叫做rem,和em類似但對於Html標籤，rem更方便使用。

<style>
    html {
        font-size: 50px;
    }
    /* 大屏樣式 */
    p {
        width: 1000px;
        height: 100px;
        font-size: 1rem;
        background-color: aqua;
    }
    /* 適配中等螢幕 */
    @media screen and (max-width: 1200px) {
        html {
            font-size: 40px;
        }
        p {
            width: 800px;
            height: 80px;
            background-color: pink;
        }
    }
    /* 適配小螢幕 */
    @media screen and (max-width: 992px) {
        html {
            font-size: 30px;
        }
        p {
            width: 600px;
            height: 60px;
            background-color:blue;
        }
    }
    /* 適配超小螢幕 */
    @media screen and (max-width: 768px) {
        html {
            font-size: 20px;
        }
        p {
            width: 400px;
            height: 40px;
            background-color: tomato;
        }
    }
</style>

4、百分比佈局

寬度不固定，可以使用百分比，內外邊距也可以使用百分比。

例如：在大屏下一行排列四個盒子，在小屏下變成一行排列2個盒子

思路一：浮動+百分比

 <div class="wrap clearfix">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</div>

<style>
    .clearfix::after {
        content: "";
        display: block;
        clear: both;
    }
    .clearfix {
        *zoom: 1;
    }
    .wrap {
        /* 如果父元素給的是定值，那麼子元素給百分比也無法實現寬度適配 */
        /* width: 1200px; */
        /* 正確的做法如下: */
        width: 80%;
        margin: 0 auto;
    }
    .wrap .box{
        float: left;
        width: 23%;
        height: 200px;
        margin: 1%;
    }
    .wrap .box:nth-child(odd) {
        background-color: tomato;
    }
    .wrap .box:nth-child(even) {
        background-color: yellow;
    }

    /* 小的螢幕是一行排兩個 */
    @media screen and (max-width: 980px) {
        .box {
            width: 48% !important;
            /* !important只能提升單條css樣式的權重 */
            height: 50px;
        }
    }
</style>

思路二：彈性盒子+百分比

<div class="wrap">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</div>

<style>
    .wrap {
        display: flex;
        flex-wrap: wrap;
        /* 如果父元素給的是定值，那麼子元素給百分比也無法實現寬度適配 */
        /* width: 1200px; */
        /* 正確的做法如下: */
        width: 80%;
        margin: 0 auto;
    }
    .wrap .box{
        width: 23%;
        height: 200px;
        margin: 1%;
    }
    .wrap .box:nth-child(odd) {
        background-color: tomato;
    }
    .wrap .box:nth-child(even) {
        background-color: yellow;
    }

    /* 小的螢幕是一行排兩個 */
    @media screen and (max-width: 980px) {
        .box {
            width: 48% !important;
            /* !important只能提升單條css樣式的權重 */
            height: 50px;
        }
    }
</style>

5、響應式圖片

（1）內容圖片處理

​ 在html頁面中的圖片，比如文章裡插入的圖片我們都可以通過css樣式max-width來進行控制圖片的最大寬度.

<div class="box">
    <img src="./images/1.jpg" alt="">
</div>

.box {
    width: 500%;        
}
.box img {
    width: 100%;
    height: auto;
}

（2）背景圖片處理

​ 除了img標籤的圖片外我們經常會遇到背景圖片，比如logo為背景圖片.

<div class="box1"></div>

.box1 {
    width: 50%;
    height: 313px;
    background: url("./images/2.jpg") no-repeat;
    background-size: 100% auto;
}

三、響應式佈局的優缺點

響應式網站的優點：

• 減少工作量網站、設計、程式碼、內容都只需要一份，多出來的工作量只是JS指令碼、CSS樣式做一些改變

• 節省時間

• 每個裝置都能得到正確的設計

響應式網站的缺點：

• 會載入更多的樣式和指令碼資源
• 設計比較難精確定位和控制
• 老版本瀏覽器相容不好