小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

搜索
分享

!!實用的CSS Media Query代碼片段

 看見就非常 2013-04-10
移動互聯(lián)網(wǎng)時代，新設(shè)備層出不窮，各種屏幕大小和分辨率的出現(xiàn)，為Web前端設(shè)計增加了一些挑戰(zhàn)。如何讓網(wǎng)站或Web應(yīng)用完美顯示在各種不同的設(shè)備上呢？答案是采用響應(yīng)式設(shè)計，讓頁面根據(jù)設(shè)備屏幕自動適應(yīng)并調(diào)整。 
http:///snippets/


CSS3的出現(xiàn)讓響應(yīng)式Web設(shè)計變得簡單，CSS3提供了強大的media queries，允許你針對不同的條件設(shè)置不同的樣式，可以在不修改頁面內(nèi)容的情況下，為不同設(shè)備提供不同的樣式效果。 

以下是一些CSS media queries代碼片段，你可以添加在自己的項目中，讓頁面根據(jù)屏幕自適應(yīng)： 

iPhone5 

Css代碼 
  1. @media screen and (device-aspect-ratio: 40/71) {  
  2. }  
  3. or  
  4. @media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){  
  5. }  

Blackberry Torch 

Css代碼 
  1. @media screen and (max-device-width: 480px) {   
  2. }  

Samsung S3 

Css代碼 
  1. @media only screen and (-webkit-device-pixel-ratio: 2) {  
  2. }  

Google Nexus 7 

Css代碼 
  1. @media screen and (device-width: 600px) and (device-height: 905px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) {  
  2. }  

iPad Mini 

Css代碼 
  1. @media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) {  
  2. }  

iPad 3 

橫向 
Css代碼 
  1. @media (max-device-width: 1024px) and (orientation: landscape) {   
  2. }  

豎向 
Css代碼 
  1. @media (max-device-width: 768px) and (orientation: portrait) {   
  2. }  

Galaxy Tab 10.1 

橫向 
Css代碼 
  1. @media (max-device-width: 1280px) and (orientation: landscape) {   
  2. }  

豎向 
Css代碼 
  1. @media (max-device-width: 800px) and (orientation: portrait) {   
  2. }  

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻(xiàn)花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多