有關CSS3媒體查詢知識的總結

1、什麼是媒體查詢

媒體查詢可以讓我們根據裝置顯示器的特性（如視窗寬度、螢幕比例、裝置方向：橫向或縱向）為其設定CSS樣式，媒體查詢由媒體類型和一個或多個偵測媒體特性的條件式組成。媒體查詢中可用於偵測的媒體特性有 width 、 height 和 color （等）。使用媒體查詢，可以在不改變頁面內容的情況下，為特定的某些輸出裝置客製化顯示效果。

 

2、為什麼響應式設計需要，媒體查詢
如果沒有CSS3的媒體查詢模組，就不能針對裝置特性（如視窗寬度）設定特定的CSS樣式

 

3、如何在CSS檔案中引入媒體查詢

媒體查詢寫在CSS樣式程式碼的最後，CSS是層疊樣式表，在同一特殊性下，後面的樣式會重疊前面的樣式

4、怎麼使用media

準備工作1：設定Meta標籤

首先我們在使用Media的時候需要先設定下面這段程式碼，來相容於行動裝置的展示效果：

1. ##;

這段程式碼的幾個參數解釋：

• #width = device-width：寬度等於目前裝置的寬度

• initial-scale：初始的縮放比例（預設為1.0）  

• minimum-scale：允許使用者縮放到的最小比例（預設為1.0）    

• maximum-scale：允許使用者縮放到的最大比例（預設為1.0）   

• user-scalable：使用者是否可以手動縮放（預設為no，因為我們不希望使用者放大縮小頁面） 

 

準備工作2：載入相容檔案JS

因為IE8既不支援HTML5也不支援CSS3 Media，所以我們需要載入兩個JS文件，來確保我們的程式碼實現相容效果：

2. # 
##準備工作3：設定IE渲染方式預設為最高(這部分可以選擇添加也可以不添加)

現在有很多人的IE瀏覽器都升級到IE9以上了，所以這個時候就有又很多詭異的事情發生了，例如現在是IE9的瀏覽器，但是瀏覽器的文檔模式卻是IE8:

#為了防止這種情況，我們需要下面這段程式碼來讓IE的文檔模式永遠都是最新的：

#這段程式碼後面加了一個

chrome=1

，這個

Google Chrome Frame（Google內嵌瀏覽器框架GCF）

，如果有的使用者電腦裡面裝了這個chrome的插件，就可以讓電腦裡面的IE不管是哪個版本的都可以使用

Webkit

引擎及

V8

引擎進行排版及運算，無比給力，不過如果用戶沒裝這個插件，那這段程式碼就會讓IE以最高的文件模式展現效果。這段程式碼我還是建議你們用上，不過不用也是可以的。

二、

怎麼在CSS檔案中寫CSS響應式媒體查詢 

#例如:  依照不同寬度樣式改變

#################################### ###HTML：############

#######
• John Doe
######
• Mary Moe< /li>######
• Amanda Panda
######

###### ##########CSS：### #########//寬度小於500像素################@media screen and (max-width:500px) {######      ul> li {######                   background: blue;###

                   color: #fff;

                   font-size: 12px # 

/ /寬度在500-700像素

@media screen and (max-width:700px) and (min-width:501px) {

       ul>li {#                    background: goldenrod;

                 : 16px;

              }

}

 

//寬度在700-1000像素

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

                   ul>li {

                    ground                   color: #000;                                     }

#}

 

//寬度大於1000像素

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

ul>li {

                                 background: violet;#   color: #333;

                                 font-size: 22px;

 

# }

//風格結束

 

In  a  word,   @media 有三個重點：

  1，meta 標籤；

2，相容於IE；

3，@media  screen  and (max-width:980px){}         (範例樣式)

以上是有關CSS3媒體查詢知識的總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn