不多的代码,IE9以下浏览器需要做兼容处理,因为不支持css3的 Media Query(媒体查询)。
适应各种尺寸的设备。
技术细节:
1. 很多地方不能使用像素作单位,要使用em或者%
2. 使用@media来定制不同尺寸设备下的css代码
3. 设备太小的时候,适当隐藏部分元素,并调整字体大小
4. img使用百分数设置宽、高,适当使用max-width、max-height做一下控制
<无>
源码与演示:源码出处 演示出处
<meta name="viewport" content="width=device-width, minimum-scale=1.0"> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->