반응형 레이아웃이란 무엇입니까? HTML 반응형 레이아웃 구현
이 글의 내용은 반응형 레이아웃이 무엇인지에 관한 것입니다. HTML 반응형 레이아웃의 구현에는 특정 참고 가치가 있습니다. 도움이 필요한 친구가 참고할 수 있기를 바랍니다.
1단계: 웹 페이지 코드 헤드에 뷰포트 메타 태그 줄을 추가합니다.
(1) 뷰포트는 웹 페이지의 기본 너비와 높이입니다. 위의 코드 줄은 웹 페이지 너비를 의미합니다. 는 기본적으로 화면 너비와 같습니다(width=device-width). 원래 크기 조정 비율(initial-scale=1)은 1.0입니다. 즉, 웹 페이지의 초기 크기는 화면 영역의 100%를 차지합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
IE9를 포함한 모든 주요 브라우저는 이 설정을 지원합니다. 이전 브라우저(주로 IE6, 7, 8)의 경우 css3-mediaqueries.js를 사용해야 합니다.
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries- js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script>
<![endif]-->(2) X-UA-Compatible
X-UA-Compatible은 IE8부터 새로 추가된 설정으로, IE8 이하의 브라우저에서는 인식되지 않습니다. 메타에서 X-UA-Compatible 값을 설정하면 웹 페이지의 호환성 모드 설정을 지정할 수 있습니다.
#IE 브라우저, 문서 표준을 선언하기 위해 DTD를 사용하는지 여부에 관계없이 IE8/9는 IE7 엔진을 사용하여 페이지를 렌더링합니다.
<meta http-equiv="X-UA-Compatible" content="IE=7">
#IE 브라우저, IE8/9는 IE8 엔진을 사용하여 페이지를 렌더링합니다.
<meta http-equiv="X-UA-Compatible" content="IE=8">
#IE 브라우저, IE8/9 이상 버전에서는 IE의 가장 높은 버전을 사용하여 페이지를 렌더링합니다.
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9"> <meta http-equiv="X-UA-Compatible" content="IE=7,9">
#IE=edge는 IE에게 최신 엔진을 사용하여 웹 페이지를 렌더링하도록 지시하고 chrome=1은 Chrome 프레임을 활성화합니다.
여기서 chrome=1은 Chrome 브라우저를 시뮬레이션할 수 있도록 IE의 기술이 향상되었다는 의미가 아니라 Google에서 개발한 Google Chrome Frame(Google Embedded Browser Framework GCF)과 관련이 있습니다. 이 플러그인은 사용자의 IE 브라우저의 모양을 그대로 유지할 수 있지만 사용자는 실제로 웹을 탐색할 때 Chrome 커널을 사용하고 있으며 Windows XP 이상에서 IE6/7/8을 지원합니다.
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
2단계: 유동 레이아웃
페이지의 각 블록 위치는 부동이며 고정되지 않습니다. 너비가 너무 작아 두 요소에 맞지 않으면 다음 요소가 자동으로 아래의 이전 요소로 스크롤됩니다. 수평 방향으로 오버플로가 발생하지 않도록 하여 수평 스크롤 막대의 모양을 피하세요
.left{ width:30%; float:left}
.right{ width:70%; float:right;}3단계: CSS @media 규칙, CSS의 선택적 로딩
@media screen and (max-device-width: 400px) { .left{ float:none;} }화면이 400보다 작을 때 왼쪽은 플로팅을 취소합니다.
적응형 웹 디자인의 핵심은 CSS3에서 도입한 Media Query 모듈입니다. 화면 너비를 자동으로 감지한 후 해당 CSS 파일을 로드합니다. 화면 너비가 600픽셀(최대 장치 너비: 600px) 미만인 경우 css600.css 파일을 로드합니다. 화면 너비가 600픽셀에서 980픽셀 사이이면 css600-980.css 파일이 로드됩니다.
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)" href="style/css/css600.css" /> <link rel="stylesheet" type="text/css" media="screen and (min-width: 600px) and (max-device-width: 980px)" href="css600-980.css" />
html 태그가 포함된 CSS 파일을 로드하는 것 외에도 기존 CSS 파일에서도 로드할 수 있습니다.
@import url("css600.css") screen and (max-device-width: 600px);4단계: 절대 너비, 글꼴 크기를 사용하지 마세요
(1) width:auto / width:XX% ;
(2) 글꼴 크기는 페이지 기본 크기인 16픽셀의 100%입니다. 글꼴에 절대 크기 "PX"를 사용하지 말고 상대 크기 "REM"을 사용하세요
html{font-size:62.5%;} body {font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem;5단계: 이미지 조정
"적응형 웹 디자인"도 이미지의 자동 크기 조정을 구현해야 합니다.
img, object {max-width: 100%;}이전 버전의 IE는 max-width를 지원하지 않으므로 다음과 같이 작성해야 합니다.
img {width: 100%;}Windows 플랫폼에서 이미지 크기를 조정하면 이미지 왜곡이 발생할 수 있습니다. 이때 IE의 전용 명령인
img { width:100%; -ms-interpolation-mode: bicubic;}를 사용하거나 js--imgSizer.js
addLoadEvent(function() {
var imgs = document.getElementById("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});를 사용할 수 있습니다. 추천 관련 기사:
HTML에서 웹 사이트 배경 이미지를 변경하거나 추가하는 코드를 작성하는 방법은 무엇입니까? (예)
