响应式网站

响应式网站

不多的代码,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]-->
响应式网站

相关文章:

你感兴趣的文章:

标签云: