问题简介
今天又遇到了一个难题,让我调试了一个下午,就是css关于网页端transform的scale()缩放会出现白边的问题。
这个问题在网页端不算大问题,让我苦恼的是在手机端,每款手机的比例不一样,缩放自然不也一样,这个问题下篇再说,接下来让我们简单聊聊单纯网页端出现这个问题的解决方法。
案例
此处亲手编写的测试网页,简单明了,废话不多说,上代码!
原代码
<!DOCTYPE html>
<head>
<title></title>
<meta charset="UTF-8" />
<style type="text/css">
body{
margin: 0;
padding: 0;
}
#outer1{
width: 100%;//宽度自适应屏幕宽度
height: auto;//高度自适应
background: #CCC;
}
.inner{
height: 500px;
width: 1200px;
background: #B1FBF3;
margin: 0 auto;
}
#outer2{
width: 100%;
height: 300px;
background: #FAB000;
}
</style>
</head>
<body>
<!--此处考虑网页一般都是100%宽度,我们设置内层为固定长度1200px-->
<div id="outer1">
<div class="inner">
</div>
</div>
<div id="outer2">
</div>
</body>
</html>
原效果图
缩放代码
.inner{
height: 500px;
width: 1200px;
background: #B1FBF3;
margin: 0 auto;
transform: scale(0.5);/*缩放比例50%*/
transform-origin: left top 0;/*div以(0,0)坐标为基准,位于左侧上方*/
}
缩放效果
解决方法
这个问题目前我就想到了两种方法仅限于解决网页端缩放问题,且各有其局限性,以后的方法我找到以后会慢慢补充。
方法一:margin负值
缺点:会因为不同屏幕分辨率的大小,随着缩放的比例的不同,margin-top的值是不确定的,同时手机上会有非常明显的空白问题!
修改margin的值为:(scale(缩放比例)*缩放前的值)-缩放前的值,即width=(0.5*500)-500 = -250px;
#outer2{
width: 100%;
height: 300px;
background: #FAB000;
margin-top: -250px;
}
方法二:建议使用
思路:调整被缩小的外层高度,并设置外面层的大小为里层缩放后的大小
#outer1{
width: 600px;
height: 250px;
background: #CCC;
}
第二个方法不太好理解,特地画了个图,注释一下,该方法我还没找到什么缺点,应该效果不错,至于为什么不居中?这不算什么问题,稍微调一下就好了,稍后我也会整理一份css设置居中的解决方法。