html5中让页面缩放的4种方法

标签：type   建议   web   scala   margin   osi   方法   content   position   

1.viewport

这种方法，不是所有的浏览器都兼容
<meta name="viewport" content="width=640,minimum-scale=0.5,maximum-scale=1.0,user-scalable=no, initial-scale=1.0" />

2.百分比
这种方法，可以兼容大部分浏览器，但是修改幅度比较大
.main .login .txt1{margin-top:8.59375%; position:relative;}

3.css transform
这种方法，可以兼容大部分浏览器，但是页面的位置是居中的
.w320
{
transform: scale(1,1);
-ms-transform: scale(1,1); /* IE 9 */
-webkit-transform: scale(0.8,0.8); /* Safari and Chrome */
}

4.使用响应式布局，但是这样的话得做两个两套界面
<link rel=“stylesheet” type=“text/css” media=“only screen and （max-width： 480px），only screen and （max-device-width： 480px）” href=“link.css”/>

建议使用第2，4种

html5中让页面缩放的4种方法

标签：type   建议   web   scala   margin   osi   方法   content   position   

原文地址：http://www.cnblogs.com/yangwu-183/p/7634143.html