css筆記：響應(yīng)式、媒體查詢

Coder編程 2021-08-29

展開全文

1 響應(yīng)式

什么是響應(yīng)式布局

響應(yīng)式布局（respond layout）是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網(wǎng)站能夠兼容多個終端（手機、平板、pc電腦、手表） ——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯(lián)網(wǎng)瀏覽而誕生的。

為什么要有響應(yīng)式布局？

在移動互聯(lián)日益成熟的時候，在PC端開發(fā)的網(wǎng)頁已經(jīng)無法滿足移動設(shè)備的要求。
通常的做法是針對移動端單獨做一套特定的版本。
如果終端越來越多，那么需要開發(fā)的版本就會越來越多（大屏設(shè)備的普及）
響應(yīng)式布局 ：一個網(wǎng)站能夠兼容多個終端（節(jié)約開發(fā)成本）

優(yōu)點：

面對不同分辨率設(shè)備靈活性強

能夠快捷解決多設(shè)備顯示適應(yīng)問題

缺點：

兼容各種設(shè)備工作量大，效率低下

代碼累贅，會出現(xiàn)隱藏?zé)o用的元素，加載時間加長

其實這是一種折中性質(zhì)的設(shè)計解決方案，多方面因素影響而達不到最佳效果

一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)，會出現(xiàn)用戶混淆的情況

響應(yīng)式開發(fā)現(xiàn)狀：

如果已經(jīng)存在PC的網(wǎng)站了，那么一般不會使用響應(yīng)式開發(fā)，而是針對移動端再開發(fā)一套系統(tǒng)（比如京東、淘寶）
在新建站點 上采用響應(yīng)式開發(fā)的越來越多。
在國內(nèi)，響應(yīng)式開發(fā)還不是特別的流行。但響應(yīng)式開發(fā)是大勢所趨，會越來越流行。

響應(yīng)式開發(fā)與移動web開發(fā)的比較

開發(fā)方式	移動web開發(fā)+pc開發(fā)	響應(yīng)式開發(fā)
引用場景	一般已經(jīng)有了PC端網(wǎng)站，只需要端獨開發(fā)移動端網(wǎng)站即可	針對一些新建網(wǎng)站，并且要求適配移動端
開發(fā)	針對性強，開發(fā)效率高	兼容各種終端，效率低
適配	只能適配移動端或者PC端，pad上體驗比較差	可以適配各種終端
效率	代碼簡潔，加載快	代碼相對復(fù)雜，加載慢

2 媒體查詢

媒體查詢（Media Query）是CSS提出來的一個新的屬性，通過媒體查詢可以查詢到screen的寬度，從而指定某個寬度區(qū)間的網(wǎng)頁布局。

設(shè)備分類

分類	寬度范圍
大屏設(shè)備	>1200px
中屏設(shè)備	992px~1200px
小屏設(shè)備	768px~992px
超小屏設(shè)備	< 768px

媒體查詢的使用

需求：

<!--
需求：
    大屏設(shè)備(>1200px)   版心：1170px   背景色：紅色
    中屏設(shè)備(992-1200)  版心：970px    背景色：藍色
    小屏設(shè)備(768-992)   版心：750px    背景色：黃色
    超小屏設(shè)備(<768px)  版心：100%     背景色：綠色
-->

響應(yīng)式開發(fā)的原理：使用媒體查詢實現(xiàn)不同終端的布局和樣式的切換。

媒體查詢語法：

/*查詢屏幕*/
@media screen and 條件 {
}

/*條件的寫法*/
/*min-width:只要屏幕寬度超過這個值的設(shè)備樣式就能生效*/
/*max-width:只要屏幕寬度小于這個值的設(shè)備樣式就能生效*/
@media screen and (min-width: 1200px) {
  .container {
    width: 1170px;
    background-color: red;
  }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
  .container {
    width: 970px;
    background-color: blue;
  }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
  .container {
    width: 750px;
    background-color: yellow;
  }
}

@media screen and (max-width: 768px) {
  .container {
    width: 100%;
    background-color: green;
  }
}

弊端：現(xiàn)在只有一個div，要做一套響應(yīng)式布局，就需要如此多的代碼，非常的麻煩，因此我們會更多的借助一些響應(yīng)式的框架，比如bootstrap。

3 原生響應(yīng)式的實現(xiàn)

第一步：通過媒體查詢實現(xiàn)響應(yīng)式的版心

第二步：再調(diào)整版心內(nèi)的細節(jié)樣式

【原生響應(yīng)式實現(xiàn)demo】

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>原生響應(yīng)式</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <!-- 頭部 導(dǎo)航 -->
    <div class="container">
        <div class="header">
            <ul class="left pull-left hide-xs">
                <li>導(dǎo)航</li>
                <li>導(dǎo)航</li>
                <li>導(dǎo)航</li>
                <li>導(dǎo)航</li>
                <li>導(dǎo)航</li>
                <li>導(dǎo)航</li>
            </ul>
            <ul class="right pull-right hide-xs">
                <li class="hide-sm">導(dǎo)航</li>
                <li class="hide-sm">導(dǎo)航</li>
                <li>導(dǎo)航</li>
            </ul>
            <span class="btn">三</span>
        </div>
    </div>

    <!-- 原生響應(yīng)式 實現(xiàn)柵格布局-媒體查詢 + 浮動+ 百分百  -->
    <div class="container product">
        <div class="column">
            <div class="in"></div>
        </div>
        <div class="column">
            <div class="in"></div>
        </div>
        <div class="column">
            <div class="in"></div>
        </div>
        <div class="column">
            <div class="in"></div>
        </div>
        <div class="column">
            <div class="in"></div>
        </div>
        <div class="column">
            <div class="in"></div>
        </div>
    </div>
    <script>
    document.querySelector('.btn').onclick= function () {
            document.querySelector('.left').classList.toggle('hide-xs');
        };
    </script>
</body>
</html>

less

* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}

// 版心
.container {
    width: 1200px;
    margin:0 auto;
}
.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

.clearfix{
    overflow: hidden;
}
.header {
    position: relative;
    height: 70px;
    padding: 10px;
    background-color: #ccc;
    ul {
        li {
            float: left;
            height: 50px;
            width: 80px;
            background-color:green;
            color: #fff;
            text-align: center;
            line-height: 50px;
            margin: 0 10px;
        }
    }
    .btn {
        position: absolute;
        right: 10px;
        top: 10px;
        border-radius: 5px;
        width: 80px;
        height: 50px;
        background-color: yellow;
        color: red;
        text-align: center;
        line-height: 50px;
        font-size: 40px;
        display: none;
    }
}

.product {
    .column{
        float: left;    
        width: 33.33%;
        height: 150px;
        // border: 1px solid #000;
        padding: 10px;
        .in {
            background-color: #f99;
            height:100%;
        }
        
    }
}

// 關(guān)鍵是 有一套響應(yīng)式的版心 
@media screen and (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
    .container {
        width: 970px;
    }
}
@media screen and (min-width: 768px) and (max-width: 992px) {
    .container {
        width: 750px;
    }
    .hide-sm {
        display: none;
    }
    .product {
        .column{
            width: 50%;
        }
    }
}
@media screen and (max-width: 768px) {
    .container {
        width: 100%;
    }
    .hide-xs {
        display: none;
    }
    // 設(shè)置導(dǎo)航樣式
    .header {
        ul {
            margin-top: 60px;
            width:100%;
            li {
                width: 100%;
                margin: 0;
                margin-bottom: 5px;
            }
        }
        .btn {
            display: block;
        }
       
    }

    .product {
        .column{
            width: 100%;
        }
    }
}