# 2.響應式原理

# 2.響應式原理

 

- 響應式具備的特色

    1.網頁寬度自動調整

    2.儘可能少用絕對寬度

    3.字體要使用rem、em做爲單位

    4.佈局要使用浮動或者彈性佈局

    響應式下任何東西都要隨着屏幕的尺寸改變而改變不能使用絕對大小

 

- 媒體查詢

    根據一個或多個基於設備類型、具體特色和環境來應用樣式

 

    @media

 

    @規則

        @chartset  定義編碼

        @import    引入css文件（css模塊化）

        @font-face 自定義字體

        @keyframes animation裏的關鍵幀

        @media     媒體查詢

```html

媒體查詢使用方式一：

<style>

    @media all{

        div{

            font-size:3rem;

        }

    }

</style>

 

媒體查詢使用方式二：

<style>

    @import url("css/bottstrap.css")(min-width:200px);

</style>

 

媒體查詢使用方式三：

<link rel="stylesheet" href="css/bootstrap.css" media="all">

```

 

- 媒體查詢介紹

    1.媒體類型

        all 全部設備

        print 打印機設備

        screen 彩色的電腦屏幕

        speech 聽覺設備（針對有視力障礙的人士，能夠把頁面的內容以語音的方式呈現的設備）

        注意：tty、tv、projection、braille、embossed、aural等幾種類型在媒體查詢4中已經廢棄

 

```html

<style>

    div{

        width:200px;

        height:200px;

        background:green;

    }

    @media print{

        div{

            font-size:80px;

        }

    }

    @media screen{

        div{

            width:300px;

            height:300px;

            background:pink;

        }

    }

    @media all{

        div{

            width:400px;

            height:400px;

            background:grey;

        }

    }

</style>

<div>媒體類型</div>

```

 

    2.媒體特性

        width 寬度

            min-width 最小的寬度，寬度只能比這個大    

            max-width 最大的寬度，寬度只能比這個小        

        height 高度

            min-height 最小的高度，高度只能比這個大    

            max-height 最大的高度，高度只能比這個小 

        orientation 屏幕方向

            landscape 橫屏（寬度大於高度）

            portrait  豎屏（高度大於寬度）

        aspect-ratio 寬高比

        -webkit-device-pixel-ratio 像素比（webkit內核的私有屬性）

```html

<style>

    div{

        width:200px;

        height:200px;

        background:red;

    }

    /*屏幕尺寸大於500的時候知足*/

    @media (min-width:500px){

        div{

            background:green;

        }

    }

    /*屏幕尺寸小於400的時候知足*/

    @media (max-width:400px){

        div{

            background:blue;

        }

    }

    /*橫屏的時候知足*/

    @media (orientation:landscape){

        div{

            width:400px;

            height:100px;

        }

    }

    /*豎屏的時候知足*/

    @media (orientation:portrait){

        div{

            width:100px;

            height:400px;

        }

    }

    /*寬高比爲4:3的時候知足*/

    @media (aspect-ratio:4/3){

        div{

            border:10px solid #000;

        }

    }

    /*像素比爲2的時候知足*/

    @media (-webkit-device-pixel-ratio:2){

        div::after{

            content:'hello world';

            font-size:50px;

        }

    }

</style>

<div>媒體特性</div>

```

    3.邏輯運算符 用來作條件判斷

        and 合併多個媒體類型（而且的意思）

        ,   匹配某個媒體查詢的（或者的意思）

        not 對媒體查詢取反

        only 僅在媒體查詢匹配成功後應用樣式（防範老舊瀏覽器）

```html

<style>

    div{

        width:200px;

        height:200px;

        background:red;

    }

    /*全部設備 && 屏幕尺寸大於500 && 橫屏的時候 知足*/

    @media all and (min-width:500px) and (orientation:landscape){

        div{

            background:green;

        }

    }

    /*屏幕尺寸大於500 || 橫屏的時候 知足*/

    @media (min-width:500px),(orientation:landscape){

        div{

            background:pink;

        }

    }

    /*（除了全部設備下屏幕小於800）=== （全部設備下屏幕大於800）的時候知足*/

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

        div{

            background:blue;

        }

    }

    /*老舊瀏覽器不認識@media時候，不會解析裏面的css樣式*/

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

        div{

            background:grey;

        }

    }

</style>

<div>邏輯運算符</div>

```

    媒體查詢參考： https://drafts.csswg.org/mediaqueries/

 

以上是markdown格式的筆記