响应式页面的前端制作

1. 在<head></head>里加入@media媒体查询

<link rel="stylesheet" media="not all and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 3)" href="dist/css/style.min.css">
<link rel="stylesheet" media="(min-device-width: 414px) and (max-device-width: 736px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 3)" href="dist/css/style_iphone6+.min.css">

注：a. device-width是规定设备的尺寸范围

　　b. orientation：portrait是规定只能竖屏查看

　　c. -webkit-min-device-pixel-ratio是规定这个尺寸范围内的分辨率为3，也就是设计图做到前端手机上要全部缩小3倍。

　　附表： 

  • -webkit-min-device-pixel-ratio为1.0
  1. 所有非Retina的Mac
  2. 所有非Retina的iOS设备
  3. Acer Iconia A500 
  4. Samsung Galaxy Tab 10.1
  5. 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 

　　d. 不同尺寸下，使用不同的样式表。style.cess 和 style_iphone6+.css。

2. 

posted on 2015-03-26 11:35  JolinChan  阅读(155)  评论(0)    收藏  举报

导航