首页 > Web开发 > 详细

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

时间:2017-10-07 13:29:56      阅读:275      评论:0      收藏:0      [点我收藏+]

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种方法

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!