css筆記：響應式、媒體查詢

時間 2021-01-10

標籤 css html web bootstrap 移動web開發框架 less ide 佈局網站欄目 CSS 简体版

原文原文鏈接

1 響應式

什麼是響應式佈局

響應式佈局（respond layout）是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站可以兼容多個終端（手機、平板、pc電腦、手錶） ——而不是爲每一個終端作一個特定的版本。這個概念是爲解決移動互聯網瀏覽而誕生的。css

爲何要有響應式佈局？html

在移動互聯日益成熟的時候，在PC端開發的網頁已經沒法知足移動設備的要求。
一般的作法是針對移動端單獨作一套特定的版本。
若是終端愈來愈多，那麼須要開發的版本就會愈來愈多（大屏設備的普及）
響應式佈局 ：一個網站可以兼容多個終端（節約開發成本）

優勢：web

面對不一樣分辨率設備靈活性強bootstrap

可以快捷解決多設備顯示適應問題移動web開發

缺點：框架

兼容各類設備工做量大，效率低下less

代碼累贅，會出現隱藏無用的元素，加載時間加長ide

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

必定程度上改變了網站原有的佈局結構，會出現用戶混淆的狀況網站

響應式開發現狀：

若是已經存在PC的網站了，那麼通常不會使用響應式開發，而是針對移動端再開發一套系統（好比京東、淘寶）
在新建站點 上採用響應式開發的愈來愈多。
在國內，響應式開發還不是特別的流行。但響應式開發是大勢所趨，會愈來愈流行。

響應式開發與移動web開發的比較

開發方式	移動web開發+pc開發	響應式開發
引用場景	通常已經有了PC端網站，只須要端獨開發移動端網站便可	針對一些新建網站，而且要求適配移動端
開發	針對性強，開發效率高	兼容各類終端，效率低
適配	只能適配移動端或者PC端，pad上體驗比較差	能夠適配各類終端
效率	代碼簡潔，加載快	代碼相對複雜，加載慢

2 媒體查詢

媒體查詢（Media Query）是CSS提出來的一個新的屬性，經過媒體查詢能夠查詢到screen的寬度，從而指定某個寬度區間的網頁佈局。

設備分類

分類	寬度範圍
大屏設備	>1200px
中屏設備	992px~1200px
小屏設備	768px~992px
超小屏設備	< 768px

媒體查詢的使用

需求：

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

響應式開發的原理：使用媒體查詢實現不一樣終端的佈局和樣式的切換。

媒體查詢語法：

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

/*條件的寫法*/
/*min-width:只要屏幕寬度超過這個值的設備樣式就能生效*/
/*max-width:只要屏幕寬度小於這個值的設備樣式就能生效*/
@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;
  }
}

弊端：如今只有一個div，要作一套響應式佈局，就須要如此多的代碼，很是的麻煩，所以咱們會更多的藉助一些響應式的框架，好比bootstrap。

3 原生響應式的實現

第一步：經過媒體查詢實現響應式的版心

第二步：再調整版心內的細節樣式

【原生響應式實現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>原生響應式</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <!-- 頭部 導航 -->
    <div class="container">
        <div class="header">
            <ul class="left pull-left hide-xs">
                <li>導航</li>
                <li>導航</li>
                <li>導航</li>
                <li>導航</li>
                <li>導航</li>
                <li>導航</li>
            </ul>
            <ul class="right pull-right hide-xs">
                <li class="hide-sm">導航</li>
                <li class="hide-sm">導航</li>
                <li>導航</li>
            </ul>
            <span class="btn">三</span>
        </div>
    </div>

    <!-- 原生響應式 實現柵格佈局-媒體查詢 + 浮動+ 百分百  -->
    <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%;
        }
        
    }
}

// 關鍵是 有一套響應式的版心 
@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;
    }
    // 設置導航樣式
    .header {
        ul {
            margin-top: 60px;
            width:100%;
            li {
                width: 100%;
                margin: 0;
                margin-bottom: 5px;
            }
        }
        .btn {
            display: block;
        }
       
    }

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