响应式设计布局之@media用法详解

2014-10-10阅读(18365)评论(0)牵着狗狗看MM

苏州实时公交查询

之前介绍过响应式设计了http://www.w3cways.com/1243.html

今天来讲解下具体@media的用法

常见写法:

[css]@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/
.class {
background: #ccc;
}
}
[/css]

@media screen and这是一种最常见的写法,后面跟上限定的屏幕尺寸

带all 跟 only的写法

一般all跟only都是对应在一起出现的

[css]@media all and (min-width:xxx) and (max-width:xxx){
/*这段查询的all是针对所有设备(有些设备不一定是屏幕,也许是打字机,盲人阅读器)*/
}

@media only screen and (min-width:xxx) and (max-width:xxx){
/*上面针对了所有设备,这段是只(only)针对彩色屏幕设备*/
}
[/css]

device-aspect-ratio

device-aspect-ratio可以用来适配特定屏幕长宽比的设备,这也是一个很有用的属性,比如,我们的页面想要对长宽比为4:3的普通屏幕定义一种样式,然后对于16:9和16:10的宽屏,定义另一种样式,比如自适应宽度和固定宽度:
用法:

[css]@media only screen and (device-aspect-ratio:4/3)
[/css]

-webkit-min-device-pixel-ratio的常见值对比(是设备上物理像素和设备独立像素,设备像素比率)

设备 分辨率 设备像素比率
Android LDPI 320×240 0.75
Iphone 3 & Android MDPI 320×480 1
Android HDPI 480×800 1.5
Iphone 4 960×640 2.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

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 响应式设计布局之@media用法详解
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏