响应式设计要点

标签：des   style   blog   http   color   ar   os   使用   sp   

1：IE9以下支持html5新元素方法:让ie浏览器支持html5新标签的解决方法(使用html5shiv)

---------------------------------------------------------------------------------------------------------------

2: IE9以下不支持media query，我们需要使用 media-queries.js 或者 respond.js 实现ie浏览器对media query的支持。

可以使用css3-mediaqueries.js来解决浏览器不支持media queries的问题。

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]—>

-----------------------------------------------------------------------

3：CSS Media Queries

这一技巧可以创建自适应的设计，可以根据 viewport 的宽度重写布局的css。

@media screen and (max-width: 560px) {
    #content {
        width: auto;
        float: none;
    }
    #sidebar {
        width: 100%;
        float: none;
    }
}

-------------------------------------------------------------

4：弹性图片

使用max-width:100% 和 height:auto，可以让图片变得更加弹性。

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

----------------------------------------------------------------

5：弹性的内嵌视频

使用width:100% 和 height:auto，可以让内嵌视频变得更加弹性。

.video embed,
.video object,
.video iframe {
    width: 100%;
    height: auto;
}

------------------------------------------------------------------

6：Webkit字体大小调整

使用-webkit-text-size-adjust:none，在iphone上禁用字体大小调整。

html {
    -webkit-text-size-adjust: none;
}

----------------------------------------------------------------------

7：设置iPhone Viewport 和 Initial Scale
下面的语句使用meta标签设置viewport 和 inital scale。

<meta name="viewport" content="width=device-width; initial-scale=1.0">

<参考：http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries>

响应式设计要点

标签：des   style   blog   http   color   ar   os   使用   sp   

原文地址：http://www.cnblogs.com/ChandlerVer5/p/responsive-design.html