响应式页面的前端制作
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
- 所有非Retina的Mac
- 所有非Retina的iOS设备
- Acer Iconia A500
- Samsung Galaxy Tab 10.1
- Samsung Galaxy S
- -webkit-min-device-pixel-ratio为1.3
- Google Nexus 7
- -webkit-min-device-pixel-ratio为1.5
- Google Nexus S
- Samsung Galaxy S II
- HTC Desire
- HTC Desire HD
- HTC Incredible S
- HTC Velocity
- HTC Sensation
- -webkit-min-device-pixel-ratio为2.0
- iPhone 4
- iPhone 4S
- iPhone 5
- iPad (3rd generation)
- iPad 4
- 所有Retina displays 的MAC
- Google Galaxy Nexus
- Google Nexus 4
- Google Nexus 10
- Samsung Galaxy S III
- Samsung Galaxy Note II
- Sony Xperia S
- HTC One X
d. 不同尺寸下,使用不同的样式表。style.cess 和 style_iphone6+.css。
2.