CSS 媒體查詢@media

1. 概述

1.1 定義

@media可以針對不同的屏幕尺寸(媒體類型)設置不同的樣式，在響應式頁面中，@media非常有用。重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。

1.2 使用

　　css語法：

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

　　媒體類型(mediatype)：

• • all  —— 所有設備
  • screen —— 用於電腦屏幕，平板電腦，智能手機等。
  • print —— 用於打印機和打印預覽。
  • speech —— 應用於屏幕閱讀器等發聲設備

　　媒體功能(media feature)[常用]：

• • max-width  —— 定義輸出設備中的頁面最大可見區域寬度
  • min-width —— 定義輸出設備中的頁面最小可見區域寬度。
  • max-height —— 定義輸出設備中的頁面最大可見區域高度。
  • min-height —— 定義輸出設備中的頁面最小可見區域高度。
  • orientation —— 定義輸出設備中的頁面可見區域高度是否大於或等於寬度。
    　　                   有兩個值  landscape(橫屏) |  portrait(豎屏)，portrait：指定輸出設備中的頁面可見區域高度大於或等於寬度；landscape：除portrait值情況外，都是landscape。

　　針對不同的媒體使用不同樣式(stylesheets)：

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

 

1.3 實例

　　如果文檔寬度小於400像素，則設置html跟節點fontsize為30px，頁面中的尺寸可使用rem進行處理。

    @media screen and (max-width: 400px) {
        html{
            font-size: 30px;
        }
    }

 

 2. 媒體查詢尺寸

　　說明：項目常用：

• • min-width: 1200px —— 電腦
  • max-width: 1100px —— iPad Pro 
  • max-width: 990px —— iPad
  • max-width: 760px —— 手機

    @media screen and (min-width: 1200px) {
        html {
            font-size: 100px;
        }
    }
    @media screen and (max-width: 1100px) {
        html {
            font-size: 100px;
        }
    }
    @media screen and (max-width: 990px) {
        html {
            font-size: 80px;
        }
    }
    @media screen and (max-width: 760px) {
        html{
            font-size: 30px;
        }
    }