移動Web開發入門(二) -- 媒體查詢、em、rem

前言

本文主要記錄了媒體查詢的基本概念，包含媒體查詢的邏輯關系、媒體特征表達式、常用媒體尺寸以及移動端常用機關。

媒體查詢

通過查詢目前屬于哪種裝置, 讓網頁能夠在不同的裝置下正常渲染顯示。

媒體類型

• all (所有的裝置)；
• print (列印裝置)；
• screen (電腦螢幕,平闆電腦,智能手機)；
• speech 螢幕閱讀器等發聲裝置中加載;

/*  and 表示 && screen 和 (min-width: 900px) 都滿足時樣式才有效*/
        @media screen and (min-width: 900px){
            body{
                background-color: #fff;
            }
        }
           

媒體查詢的邏輯關系

• 與

  and

  （&&）；
• 或

  ，

  (||)；
• 非

  not

  （！）；

• only

  （在不支援媒體查詢的浏覽器中不添加樣式）；

@media screen and (min-width: 900px),screen and (max-width: 1200px){
            body{
                background-color: #fff;
            }
        }
           

注意：或後面要寫媒體類型，沒寫媒體類型預設值為 all

媒體特征表達式

• width 輸出裝置中的頁面可見區域寬度;
• max-width 輸出裝置中的頁面最大可見區域寬度;
• min-width 輸出裝置中的頁面最小可見區域寬度;
• -webkit-device-pixel-ratio輸出裝置的螢幕可見寬度與高度的比率；
• -webkit-min-device-pixel-ratio 輸出裝置的螢幕可見寬度與高度的最小比率；
• -webkit-max-device-pixel-ratio 輸出裝置的螢幕可見寬度與高度的最大比率；
• orientation：portrait（豎屏） | landscape（橫屏）；

@media (-webkit-device-pixel-ratio:2){
            body{
                background-color: #fff;
            }
        }
           

常用媒體尺寸

PC優先

@media screen and (max-width:1200px){  
	}
	@media screen and (max-width:992px){ 
	}
	@media screen and (max-width:768px) {
	}
	@media screen and (max-width:576px){ 
	}
           

移動優先

@media (min-width: 576px) {
}
@media (min-width: 768px) {
}
@media (min-width: 992px) {
}
@media (min-width: 1200px) {

}
           

移動端常用機關

px

px絕對長度機關，也就是我們實際開發中最常用的機關。

em

==em是相對長度機關，相對于自身的font-size屬性進行計算==；

如果目前元素未設定font-size屬性，則從父元素上繼承fontsize屬性。

<div>
        <p>em</p>
    </div>
           

html{
            font-size: 14px;
        }
        div{
            font-size: 15px;
        }
        p{
            font-size: 20px;
            line-height: 1em;
        }
           

1em * 20px = 20px

rem

rem是CSS3新增的一個相對長度機關，相對于根元素（html）的font-size進行計算。

<div>
        <p>rem</p>
    </div>
           

html{
            font-size: 14px;
        }
        div{
            font-size: 15px;
        }
        p{
            font-size: 20px;
            line-height: 1rem;
        }
           

1rem * 14px = 14px

vw/vh

vw表示視口的寬度，1vw表示視口寬度的1%；