사용자가 확대했을 때 div가 변합니다.

Question

내 사이트가 다른 해상도로 조정되기를 원합니다. 그래서 나는 그것을 적응시키기 위해 CSS 코드를 사용했지만, 마우스로 줌 (CTRL + Mouse Scroll)하면 페이지가 완전히 변형된다. 여기

는 모습 보여주기 위해 사진처럼 :
기본값 : http://www.picamatic.com/view/10090840_defaut/
X500 :
HTML :

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

    </div> 
</div> 

나는이 문제를 해결하는 방법을 모르는 http://www.picamatic.com/view/10090842_x500/

, 여기에 내 코드입니다

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%; 
} 

나는 꽤 이해할 수 있었으면하고 가능한 한 도움이되기를 바랍니다.
미리 감사드립니다. 사용하여 당신이 확대 비활성화 할 수

을 :

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

및 @media 쿼리를 사용

Answer 1

정말 일이 어떻게이 문제를 해결하려면,하지만 어쩌면이 대체 솔루션이 도움이 될 것입니다 무엇을 설명 할 수 없다 귀하의 CSS에서 모든 화면 해상도에 적응하십시오.

예 :

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