CSS3 Media Queries 實現響應式設計

時間 2019-11-21

標籤 css3 css media queries 實現響應設計欄目 CSS 简体版

原文原文鏈接

　　在 CSS2 中，你能夠爲不一樣的媒介設備（如屏幕、打印機）指定專用的樣式表，而如今藉助 CSS3 的 Media Queries 特性，能夠更爲有效的實現這個功能。你能夠爲媒介類型添加某些條件，檢測設備並採用不一樣的樣式表。javascript

　　例如，你能夠把用於大屏幕上顯示的樣式和用於移動設備的專用樣式放在一個樣式文檔中，這樣，在不改變文檔內容的狀況下，不一樣的設備能夠呈現不一樣的界面外觀。閱讀這篇文章學習 CSS3 Media Queries 的基本功能和國外使用 CSS3 的 Media Queries 特性的優秀網站案例。css

Max Width

下面的樣式會在可視區域的寬度小於 600px 的時候被應用。html

 
         @media  
         screen  
         and ( 
         max-width 
         :  
         600px 
         ) { 
        
         .class { 
        
         background 
         :  
         #ccc 
         ; 
        
         } 
        
         }

若是你想連接到一個單獨的樣式表，把下面的代碼放在<head>標籤裏。java

 
         <link rel= 
         "stylesheet"  
         media= 
         "screen and (max-width: 600px)"  
         href= 
         "small.css"  
         />

Min Width

下面的樣式會在可視區域的寬度大於 900px 的時候被應用。web

 
         @media  
         screen  
         and ( 
         min-width 
         :  
         900px 
         ) { 
        
         .class { 
        
         background 
         :  
         #666 
         ; 
        
         } 
        
         }

Multiple Media Queries

你還能夠使用過個匹配條件，下面的樣式會在可視區域的寬度在 600px 和 900px 之間的時候被應用。iphone

 
         @media  
         screen  
         and ( 
         min-width 
         :  
         600px 
         ) and ( 
         max-width 
         :  
         900px 
         ) { 
        
         .class { 
        
         background 
         :  
         #333 
         ; 
        
         } 
        
         }

Device Width

下面的樣式會在 max-device-width 是 480px 的設備上觸發。（提示：max-device-width 是設備的實際分辨率，而 max-width 指的是可視區域分辨率。）學習

 
         @media  
         screen  
         and (max-device- 
         width 
         :  
         480px 
         ) { 
        
         .class { 
        
         background 
         :  
         #000 
         ; 
        
         } 
        
         }

For iPhone 4

下面的樣式是爲 iPhone 4 專門寫的 (做者: Thomas Maier)。網站

 
         <link rel= 
         "stylesheet"  
         media= 
         "only screen and (-webkit-min-device-pixel-ratio: 2)"  
         type= 
         "text/css"  
         href= 
         "iphone4.css"  
         />

For iPad

你還能夠使用 media query 在 iPad 上檢測方向(portrait or landscapse) (做者: Cloud Four)。spa

 
         <link rel= 
         "stylesheet"  
         media= 
         "all and (orientation:portrait)"  
         href= 
         "portrait.css" 
         > 
        
         <link rel= 
         "stylesheet"  
         media= 
         "all and (orientation:landscape)"  
         href= 
         "landscape.css" 
         >