好程序員web前端技術分享媒體查詢

好程序員web前端技術分享媒體查詢

什麼是媒體查詢

媒體查詢能夠讓咱們根據設備顯示器的特性（如視口寬度、屏幕比例、設備方向：橫向或縱向）爲其設定CSS樣式，媒體查詢由媒體類型和一個或多個檢測媒體特性的條件表達式組成。媒體查詢中可用於檢測的媒體特性有 width 、 height 和 color （等）。使用媒體查詢，能夠在不改變頁面內容的狀況下，爲特定的一些輸出設備定製顯示效果。

一、媒體查詢操做方式

實際操做爲：對設備提出詢問（稱做表達式）開始，若是表達式結果爲真，媒體查詢中的CSS被應用，若是表達式結果爲假，媒體查詢內的CSS將被忽略。

二、媒體查詢結構

@media all and (min-width:320px) { 
body { background-color:blue;}
}

設備類型（默認爲all）

screen 是媒體類型裏的一種，CSS2.1定義了10種媒體類型
and 被稱爲關鍵字，其餘關鍵字還包括 not(排除某種設備)，only(限定某種設備)
(min-width: 400px) 就是媒體特性，其被放置在一對圓括號中。

默認樣式 注意：默認樣式要寫在最前面/* 打印樣式 */@media print {}

/* 手機等小屏幕手持設備 */ @media screen and (min-width: 320px) and (max-width: 480px) {}

/* 平板之類的寬度 1024 如下設備 */ @media only screen and (min-width: 321px) and (max-width: 1024px) {}

/* PC客戶端或大屏幕設備: 1028px 至更大*/ @media only screen and (min-width: 1029px) {}

/* 豎屏 */@media screen and (orientation:portrait) and (max-width: 720px) {對應樣式}

/* 橫屏 */@media screen and (orientation:landscape){對應樣式} 

三、CSS2 Media用法

其實並非只有CSS3才支持Media的用法，早在CSS2開始就已經支持Media，具體用法，就是在HTML頁面的heaad標籤中插入以下的一段代碼
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
想知道如今的移動設備是否是縱向放置的顯示屏，能夠這樣寫：
<link rel=「stylesheet」 type=「text/css」 media=「screen and (orientation:portrait)」 href="style.css">
第一段的代碼也用CSS2來實現，讓它同樣能夠讓頁面寬度小於960的執行指定的樣式文件：
<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">

四、常涉及到的css屬性

display; width; float; text-align; font