神奇的Css3（5）媒體查詢、響應式佈局

時間 2019-11-29

標籤神奇 css3 css 媒體查詢響應佈局欄目 CSS 简体版

原文原文鏈接

8、媒體查詢（響應式佈局）

一、爲何會有媒體查詢？

移動設備的快速普及徹底顛覆了Web設計領域。用戶再也不僅在傳統桌面系統上查看Web內容，他們愈來愈多地使用具備各類尺寸的智能電話、平板電腦和其餘設備。Web設計人員的挑戰是確保他們的網站不只在大屏幕上看起來不錯，在小型的電話以及介於它們之間的各類設備上看起來也不錯。css

二、什麼是媒體查詢？

媒體查詢是向不一樣設備提供不一樣樣式的一種方式，它爲每種類型的用戶提供了最佳的體驗。html

css2: media typecss3

media type(媒體類型)是css 2中的一個很是有用的屬性，經過media type咱們能夠對不一樣的設備指定特定的樣式，從而實現更豐富的界面。chrome

css3: media query瀏覽器

media query是CSS3對media type的加強，事實上咱們能夠將media query當作是media type+css屬性(媒體特性Media features)判斷。app

三、如何使用媒體查詢？

媒體查詢的引用方法有不少種：佈局

link標籤flex

<link rel="stylesheet" media = "screen and (max-width:800px)" href="index.css">

@import網站

<style>
        @media (max-width: 800px){

            .wrapper{

                display: none;

            }
        }

</style>

css3新增的@mediaui

@media screen and (max-width: 800px) and (min-width: 600px){

            /*  */

        }

媒體類型

（Media Type): all(所有)、screen(屏幕)、print(頁面打印或打印預覽模式)

媒體特性（Media features): width(渲染區寬度)、device-width(設備寬度)...

Media Query是CSS3 對Media Type的加強版，其實能夠將Media Query當作Media Type(判斷條件)+CSS(符合條件的樣式規則)

三、邏輯操做符

①合併多個媒體屬性

@media screen and (min-width: 600px) and (max-width:100px)

合併多個媒體屬性或合併媒體屬性與媒體類型, 一個基本的媒體查詢，即一個媒體屬性與默認指定的screen媒體類型。

②指定備用功能

@media screen and (min-width: 769px), print and (min-width: 6in)"

沒有or關鍵詞可用於指定備用的媒體功能。相反，能夠將備用功能以逗號分割列表的形式列出這會將樣式應用到寬度超過769像素的屏幕或使用至少6英寸寬的紙張的打印設備。

③指定否認條件

@media not screen and (monochrome)

要指定否認條件，能夠在媒體聲明中添加關鍵字not，不能在單個條件前使用not。該關鍵字必須位於聲明的開頭，並且它會否認整個聲明。因此，上面的示例會應用於除單色屏幕外的全部設備。

四、向早期瀏覽器隱藏媒體查詢

media="only screen and (min-width: 401px) and (max-width: 600px)"

媒體查詢規範還提供了關鍵字only，它用於向早期瀏覽器隱藏媒體查詢。相似於not，該關鍵字必須位於聲明的開頭。早期瀏覽器應該將如下語句media=「screen and (min-width: 401px) and (max-width: 600px)」解釋爲media=「screen」：換句話說，它應該將樣式規則應用於全部屏幕設備，即便它不知道媒體查詢的含義。沒法識別媒體查詢的瀏覽器要求得到逗號分割的媒體類型列表，規範要求，它們應該在第一個不是連字符的非數字字母字符以前截斷每一個值。因此，早期瀏覽器應該將上面的示例解釋爲：media=「only」由於沒有only這樣的媒體類型，因此樣式表被忽略。

五、易混淆的寬度

device-width/height width/height來作爲的斷定值。

device-width/height 是設備的寬度（如電腦手機的寬度，不是瀏覽器的寬度）

width/height使用documentElement.clientWidth/Height即viewport的值。

實例一：響應式佈局

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>響應式佈局</title>

<style type="text/css">

*{

    padding: 0;

    margin: 0;

}

#header{

    height: 100px;

    border: 1px solid red;

    margin: 0 auto;

}

#main{

    margin: 10px auto;

    height: 400px;

}

#footer{

    margin: 0 auto;

    height: 100px;

    border: 1px solid red;

}

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

    #header,#footer{

        width: 800px;

    }

    #main{

        width: 800px;

    }

    #main-left{

        width: 200px;

        height: 400px;

        border: 1px solid red;

        float: left;

    }

    #main-center{

        width: 394px;

        height: 400px;

        border: 1px solid red;

        float: left;

    }

    #main-right{

        width: 200px;

        height: 400px;

        border: 1px solid red;

        float: left;

    }

}

@media screen and (min-width:600px) and (max-width:900px){

    #header,#footer{

        width: 600px;

    }

    #main{

        width: 600px;

    }

    #main-left{

        width: 200px;

        height: 400px;

        border: 1px solid red;

        float: left;

    }

    #main-center{

        width: 396px;

        height: 400px;

        border: 1px solid red;

        float: left;

    }

    #main-right{

        display: none;

    }

}

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

    #header,#footer{

        width: 300px;

    }

    #main{

        width: 300px;

    }

    #main-left{

        display: none;

    }

    #main-center{

        width: 300px;

        height: 400px;

        border: 1px solid red;

    }

    #main-right{

        display: none;

    }

}

</style>

</head>

<body>

<div id="header">頭部</div>

<div id="main">

    <div id="main-left">主題-左邊</div>

    <div id="main-center">主題-中間</div>

    <div id="main-right">主題-右邊</div>

</div>

<div id="footer"></div>

</body>

</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>Document</title>

    <style>

        * {

            padding: 0;

            margin: 0;

            font-size: 0;

        }

 

        .wrapper {

            display: flex;

            width: 100%;

            flex-wrap: wrap;

        }

 

        .wrapper div {

            width: 20%;

            display: inline-block;

            flex-grow: 1;

        }

 

        .wrapper div img {

            width: 100%;

        }

 

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

            .wrapper div {

                width: 25%;

            }

        }

 

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

            .wrapper div {

            width: 33.33%;

        }

        }

 

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

            .wrapper div {

                width: 50%;

            }

        }

 

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

            .wrapper div {

                width: 100%;

            }

        }

    </style>

</head>

 

<body>

    <div class="wrapper">

        <div>

            <img src="./dog1.jpg" alt="">

        </div>

        <div>

            <img src="./dog2.jpg" alt="">

        </div>

        <div>

            <img src="./dog3.jpg" alt="">

        </div>

        <div>

            <img src="./dog4.jpg" alt="">

        </div>

        <div>

            <img src="./dog5.jpg" alt="">

        </div>

        <div>

            <img src="./dog6.jpg" alt="">

        </div>

        <div>

            <img src="./dog7.jpg" alt="">

        </div>

        <div>

            <img src="./dog8.jpg" alt="">

        </div>

        <div>

            <img src="./dog9.jpg" alt="">

        </div>

        <div>

            <img src="./dog1.jpg" alt="">

        </div>

        <div>

            <img src="./lb1.jpg" alt="">

        </div>

        <div>

            <img src="./lb2.jpg" alt="">

        </div>

        <div>

            <img src="./lb3.jpg" alt="">

        </div>

        <div>

            <img src="./lb4.jpg" alt="">

        </div>

        <div>

            <img src="./lb5.jpg" alt="">

        </div>

</body>

 

</html>