On The Fly JQuery Resize

Question

나는 Responsive Design 웹 사이트, 특히 여러 사업부가 통합 된 페이지로 작업하고 있습니다. 웹 페이지의 크기를 조정하면 div의 너비가 백분율로 설정되어 변경됩니다. div가 사라지지 않으면 높이를 일정하게 유지해야하므로 높이를 변경하려면 중단 점을 설정해야합니다. 높이를 변경하지 않으면 일정한 상태를 유지하고 아래 div 사이에 "margin"을 추가합니다. 본질적으로, 내 논리는 다음과 같습니다. 창 크기가 다시 조정되고 너비가 810px보다 작은 경우 모든 CSS 스타일을 제거하고 마진 상단, 항목 2를 무한대까지 추가합니다. 이것은 글을 통해 설명하기가 어렵 기 때문에 끝에 다음 코드를 추가했습니다.

브라우저 창 크기를 조정할 때 콘텐츠 div가 810px보다 작은 경우 스타일이 제거되지 않습니다. 내 코드를 보면 무엇이 범인 일 수 있습니까?

기능은 라인 27-50에있다 : https://github.com/jdmagic21/coded_container/blob/master/work.js

Answer 1

이 오히려 자바 스크립트로하는 것보다, 당신은 브라우저의 폭에 따라 스타일을 변경하는 CSS 미디어 쿼리를 사용하는 것이 좋습니다.

Here's a tutorial - one of the top hits on Google for "How to use CSS Media Queries"

Here's a table of browser compatibility for Media Queries. As long as you don't care too much about IE8 or previous, you're ok!

Answer 2

당신은 CSS 미디어 쿼리를 다음과 같이 그것을 할 수 있습니다.

@media screen and (max-width: 810px) { 
    /* reset the styles of the divs here */ 
}