2015-01-04 3 views
-1

화면 크기에 따라 CSS에 정의 된 요소의 높이와 너비를 자동으로 조정할 수 있습니까? 요즘에는 시장에서 매우 다양한 화면 크기가 있습니다. 각각에 대해 별도의 CSS를 만드는 것은 매우 부담 스럽습니다. 동일한 CSS를 화면 크기에 따라 자동으로 크기 조정할 수 있는지 궁금합니다. 예를 들어 원래 CSS는 1200x800 화면 크기로 제작되었습니다. 이 크기의 절반 크기로 화면을 열면 높이와 너비가 픽셀로 정의 된 모든 CSS 요소가 자동으로 절반으로 줄어 듭니다. 모든 것이 아주 작아 보이기 때문에 페이지를 아주 작은 화면에서 열면 좋지 않을 것입니다. 그러나 요구 사항은 기본적으로 자동으로 앱 화면을 노트북, 데스크톱 및 태블릿 화면으로 조정하는 것입니다.화면 크기에 따라 CSS 매개 변수 크기 조정

예를 들어, div가 있고 div 안에는 5 개의 버튼 (CSS를 사용하여 생성 된)이 있습니다. 화면이 작을수록 단추 줄이 두 줄로 나뉘어 매우보기가 안좋아 보입니다. 이것은 단지 예일뿐입니다. 대부분의 다른 화면 요소는 유사하게 동작합니다.

+0

당신은 그들 미디어 쿼리 중 가능한 여러 방법을 가지고 (만 http://css-tricks.com/logic-in-media-queries/)와 뷰포트 단위를 많이 좋아하는 링크가 있습니다 (http://css-tricks.com 참조)./the-css/Viewport의 퍼센티지 길이). 기본적으로 Responsive Design (http://en.wikipedia.org/wiki/Responsive_web_design)이라고 불리는 것을 설명하고 있습니다 --- 재미 있어요 ^^ – sodawillow

+0

고마워요! 흥미있는 vw와 vh 소리. 나는 그것을 조사하고있다. 오직 이전 버전의 브라우저가이를 지원하지 않는다는 사실 만 알고 있습니다. 웹 마스터 분석에 따르면 5 년 된 브라우저 버전을 사용하는 사람들이 여전히 너무 많습니다. –

+0

어쩌면 다음을 시도해보십시오. (Google에서 CSS 3이없는 반응 형 디자인을 신속하게 검색했습니다 :)) : http://responsejs.com/ – sodawillow

답변

2

: 오래된 브라우저 (10 IE <)에 관해서는,이 사람들을 위해 "polyfills"함께 멋진 웹 페이지입니다 그들에게 media-queries (백만 개의 링크가 있지만 여기에는 하나 : http://css-tricks.com/logic-in-media-queries)와 뷰포트 단위가 많이 있습니다 (예 : http://css-tricks.com/the-lengths-of-css 뷰포트 백분율 길이 참조). 당신은 기본적으로 --- ^^

을 재미를 응답 디자인 (http://en.wikipedia.org/wiki/Responsive_web_design를)라고 불리는 기술 어쩌면 CSS를 3 않고 반응 디자인이 시도됩니다 http://responsejs.com

관련 문제