全國服務熱線:400-6566-535 廣州熱線:020-82105691 客服QQ:858560031
后臺演示 模板匯 豬八戒 阿里巴巴商鋪 手機版
網絡營銷電子商務建站知識編程知識行業資訊SEO知識常見問題網絡安全
您當前位置: 首頁 >資訊活動 > 建站知識 > 響應式布局設置[email protected] only screen and

響應式布局設置[email protected] only screen and

時間:2016-12-17 作者:七想網絡

 


@media only screen and 

only(限定某種設備)

screen 是媒體類型里的一種

and 被稱為關鍵字,其他關鍵字還包括 not(排除某種設備)

/* 常用類型 */
類型 解釋
all 所有設備
braille 盲文
embossed 盲文打印
handheld 手持設備
print 文檔打印或打印預覽模式
projection 項目演示,比如幻燈
screen 彩色電腦屏幕
speech 演講
tty 固定字母間距的網格的媒體,比如電傳打字機
tv 電視

screen一般用的比較多,下面是我自己的嘗試,列出常用的設備的尺寸,然后給頁面分了幾個尺寸的版本。

/* 常用設備 */
設備 屏幕尺寸
顯示器 1280 x 800
ipad 1024 x 768
Android 800 x 480
iPhone 640 x 960

兩種方式

a<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">

意思是當屏幕的寬度大于600小于800時,應用styleB.css

b@media screen and (max-width: 600px) { /*當屏幕尺寸小于600px時,應用下面的CSS樣式*/

  .class {    background: #ccc; }}


device-aspect-ratio

device-aspect-ratio可以用來適配特定屏幕長寬比的設備,這也是一個很有用的屬性,比如,我們的頁面想要對長寬比為4:3的普通屏幕定義一種樣式,然后對于16:9和16:10的寬屏,定義另一種樣式,比如自適應寬度和固定寬度:

@media only screen and (device-aspect-ratio:4/3)
-webkit-min-device-pixel-ratio的常見值對比是設備上物理像素和設備獨立像素,設備像素比率
設備分辨率設備像素比率
Android LDPI320×2400.75
Iphone 3 & Android MDPI320×4801
Android HDPI480×8001.5
Iphone 4960×6402.0

     -webkit-min-device-pixel-ratio: 1.0

  • 所有非 Retina 的 Mac

  • 所有非 Retina 的 iOS 設備

  • Acer Iconia A500

  • Samsung Galaxy Tab 10.1

  • Samsung Galaxy S

  • 其他設備

  • -webkit-min-device-pixel-ratio為1.3

  1. Google Nexus 7

  • -webkit-min-device-pixel-ratio為1.5

  1. Google Nexus S 

  2. Samsung Galaxy S II 

  3. HTC Desire

  4. HTC Desire HD

  5. HTC Incredible S 

  6. HTC Velocity

  7. HTC Sensation 

  • -webkit-min-device-pixel-ratio為2.0

  1. iPhone 4

  2. iPhone 4S

  3. iPhone 5

  4. iPad (3rd generation)

  5. iPad 4

  6. 所有Retina displays 的MAC

  7. Google Galaxy Nexus

  8. Google Nexus 4

  9. Google Nexus 10

  10. Samsung Galaxy S III

  11. Samsung Galaxy Note II

  12. Sony Xperia S

  13. HTC One X

-webkit-min-device-pixel-ratio: 3.0

   1.HTC Butterfly
   2.Sony Xperia S


(min-resolution:144dpi)
<resolution>(分辨率)

  • 使用于:位圖媒體類型,接受max/min前綴:

resolution”媒體特性描述輸出設備的分辨率,例如,像素密度。若查詢設備的非方形像素,在“min-resolution”查詢中指定的值必須與最稀疏尺寸進行比較,在“max-resolution”查詢中必須與最密集尺寸進行比較。對于“resolution”(沒有“min-”或“max-”前綴)查詢從不查詢設備的非方形像素。

對于印刷機,相當于分辨率(任意顏色的繪制點的分辨率)。

舉例說明:該媒體查詢表示樣式表適用于分辨率大于每英寸144點的設備:@media print and (min-resolution: 144dpi) { … }


 

準備開展業務? 立即創建網站 成為代理商
最新案例
最新簽約
  1. 廣州耀中生物科技發展有限公司
  2.  廣州思盈電子科技有限公司
  3. 深圳普睿科技有限公司 
  4. 黛麗香莎品牌官網
  5. 佛山市多典服飾有限公司
  6. 香港Hb男士內衣官方
網絡營銷
  1. 企業網站如何做好網站優化與推廣工作?
  2. 中小企業怎樣做網絡營銷 廣州七想網絡...
  3. 網絡營銷并不神秘,七想網絡帶您揭開秘...
  4. 透過優衣庫事件 看網絡營銷?
  5. QQ營銷推廣技巧?
  6. 中小企業網站如何推廣才有效果呢?
36选7怎么看有没有中奖 福建31选7奖金 体育彩票7位数奖金多少 云南11选5玩法 基金配资的会计处理 辽宁快乐12十期开奖结果 广东36选4 宁夏11选五容易出的号码 宁夏体彩十一选五购买 内蒙古快3专家推荐 股票配资平台开发电微178-5613-9019 辽宁快乐12手机版投注 平民计划腾讯分分彩 5分快3平台导师 北京pk赛车预测网 免费 全天5分赛车人工计划 东方财富股票行情中心