CSS媒體查詢種類

一、媒體查詢介紹

在不同的設備上，同一個網站在不同的屏幕尺寸下呈現的效果是不同的，如果能夠根據不同的設備屏幕尺寸來改變樣式表的規則就好了。這就是媒體查詢的作用。

媒體查詢是CSS3的一個重要特性，可以通過編寫不同的媒體查詢來適應不同的設備。

二、常用媒體查詢類型

根據設備的不同特點，可以將媒體查詢分為以下幾類：

1. 基於屏幕尺寸的媒體查詢

基於屏幕尺寸的媒體查詢是最常用的媒體查詢類型，因為它可以根據設備的屏幕尺寸來調整頁面的樣式。

以在小屏幕上使用bootstrap的響應式布局為例：

    
        /* 大於等於992px */
        @media (min-width: 992px) { 
            .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
            .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
                float: left;
            }
        }
        
        /* 大於等於768px */
        @media (min-width: 768px) and (max-width: 991px) {
            .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
            .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, {
                float: left;
            }
        }
        
        /* 小於768px */
        @media (max-width: 767px) {
            .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
            .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, {
                float: left;
            }
        }
    

2. 基於設備方向的媒體查詢

基於設備方向的媒體查詢可以根據設備的橫屏或豎屏方向來調整頁面的樣式。

例如，以下代碼可以使橫屏和豎屏的樣式不同：

    
        /* 豎屏 */
        @media screen and (orientation: portrait) {
            /* 樣式1 */
        }
        
        /* 橫屏 */
        @media screen and (orientation: landscape) {
            /* 樣式2 */
        }
    

3. 基於設備解析度的媒體查詢

基於設備解析度的媒體查詢可以根據設備的屏幕解析度來調整頁面的樣式。

例如，以下代碼可以使480像素以下的移動設備使用不同的樣式：

    
        @media screen and (max-width: 480px) {
            /* 樣式1 */
        }
    

4. 基於設備屏幕的媒體查詢

基於設備屏幕的媒體查詢可以根據設備的屏幕特性來調整頁面的樣式。

例如，以下代碼可以使觸屏設備和普通的非觸屏設備使用不同的樣式：

    
        /* 觸屏設備 */
        @media (pointer: coarse) {
            /* 樣式1 */
        }
        
        /* 非觸屏設備 */
        @media (pointer: fine) {
            /* 樣式2 */
        }
    

三、媒體查詢的應用場景

媒體查詢可以用於響應式設計，通過不同的媒體查詢來適應各種設備，從而提高用戶的體驗。

例如，以下代碼可以使不同屏幕尺寸下的網站使用不同的樣式：

    
        /* 大屏幕 */
        @media (min-width: 1200px) {
            /* 樣式1 */
        }
        
        /* 中屏幕 */
        @media (min-width: 992px) and (max-width: 1199px) {
            /* 樣式2 */
        }
        
        /* 小屏幕 */
        @media (max-width: 991px) {
            /* 樣式3 */
        }
    

四、總結

媒體查詢是CSS3的一個重要特性，可以根據不同的設備屏幕尺寸、解析度、方向和屏幕特性來改變樣式表的規則，適應不同的設備。

在實際開發中，可以根據具體需求選取不同的媒體查詢類型，並應用於不同的場景中。