CSS3媒體查詢總結

來源:互聯網
上載者:User

標籤:min   使用   image   設定   ini   代碼實現   查詢   nbsp   顯示   

1、什麼是媒體查詢

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

 

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

 

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

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

4、怎樣使用media

準備工作1:設定Meta標籤

首先我們在使用Media的時候需要先設定下面這段代碼,來相容行動裝置的展示效果:

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

這段代碼的幾個參數解釋:

  • 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檔案,來保證我們的代碼實現相容效果:

  1. <!--[if lt IE 9]>
  2.   <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  3.   <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  4. <![endif]-->

 

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

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

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

  1. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  2. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

這段代碼後面加了一個chrome=1,這個Google Chrome Frame(Google內嵌瀏覽器架構GCF),如果有的使用者電腦裡面裝了這個chrome的外掛程式,就可以讓電腦裡面的IE不管是哪個版本的都可以使用Webkit引擎及V8引擎進行排版及運算,無比給力,不過如果使用者沒裝這個外掛程式,那這段代碼就會讓IE以最高的文檔模式展現效果。這段代碼我還是建議你們用上,不過不用也是可以的。

二、怎樣在CSS檔案中寫CSS響應式媒體查詢 

例:  根據不同寬度樣式改變

HTML:

<ul><li>John Doe</li><li>Mary Moe</li><li>Amanda Panda</li></ul>  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;                    color: #000;                    font-size: 16px;              }}  //寬度在700-1000像素@media screen and (max-width:1000px) and (min-width:701px) {                   ul>li {                                background: plum;                                color: #000;                                font-size: 20px;                           }}  //寬度大於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媒體查詢總結

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.