页面缩放影响到布局有很多种情况,在此仅记录我遇到过的一种情况:
自己在做业面过程总,经常遇到一个问题:
页面控件需要与背景图片对应上,例如下图所示:
图中显示为背景图片,现欲把text框与图片中的text位置对应。
这是一个登录页面,因此开始的时候我设置了该图片为登录页面的背景图,另外用图片边缘色做页面的背景色。输入框控件则放置在div中,通过设置margin使其和图片相应位置对应。浏览可以达到效果,可是如果此时缩放页面(ctrl+鼠标滚动)就会出现位移,完全对应不上。如图:
对于此问题,经过尝试,我的解决办法是,将要覆盖的图片部分和文本框放在一个容器(div)中,作为一个整体。即,将文本框放入div中,根据图片大小设置div大小,并将div 的背景设置为该图片,然后调整文本框在div中的位置直到对应上。
进行了这样的“捆绑”后,再对网页缩放,就不会出现上述文本框与图片偏移的问题了,他们将会作为一个整体同比例缩放。如图: