Question

我希望我的网站适应不同的分辨率。所以我用css代码来调整它，但是当我用鼠标缩放（CTRL +鼠标滚动）时，它会完全改变页面。

以下图片展示了它的样子：
默认值：http://www.picamatic.com/view/10090840_defaut/
x500：http://www.picamatic.com/view/10090842_x500/

我不知道如何解决这个问题，这是我的代码：
HTML：

<div id="container">
    <div class="sms">

    </div>
</div>

CSS：

#container {
    width: 85%;
    height: 90%;
    border: 1px solid black;
    margin-right: auto;
    margin-left: auto;
}

.sms {
    position: relative;
    left: 2%;
    border: 1px solid green;
    position: relative;
    width: 42.5%;
    top: 2%;
    height: 5%;
}

我希望我完全可以理解，如果可能的话，我会有任何帮助提前谢谢。

Answer 1

我无法解释实际发生的事情以及如何解决这个问题，但也许这个备用解决方案会有所帮助：

您可以使用以下方法禁用缩放：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

并在CSS中使用@media查询以适应每个屏幕分辨率。

示例：

@media (min-width: 768px) {
  NORMAL-CSS-SELECTOR-HERE (e.g. #id / .class / body) {
    CSS HERE (e.g. font-size / border)
  }
}

用户缩放时变形的div

1 个答案: