css - 当用户缩放时变形的 div

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)
  }
}