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"> 

，並使用@media查詢在你的CSS中適應每一個屏幕分辨率。

實施例：

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