이 기사에서는 다음과 같이 HTML5 반응형(적응형) 웹 디자인의 구현을 소개하고 모든 사람과 공유합니다.
1단계: 웹 페이지 코드 헤드에 뷰포트 메타 태그 줄 추가
<메타 이름=뷰포트 콘텐츠=너비=장치 너비, 초기 크기=1 />
뷰포트는 웹 페이지의 기본 너비와 높이입니다. 위 코드 줄은 웹 페이지의 너비가 기본적으로 화면 너비(너비=장치 너비)와 동일하고 원래 크기 조정 비율(초기 크기)을 의미합니다. =1)은 1.0입니다. 즉, 웹페이지의 초기 크기가 화면 영역의 100%를 차지합니다.
IE9를 포함한 모든 주요 브라우저는 이 설정을 지원합니다. 이전 브라우저(주로 IE6, 7, 8)의 경우 css3-mediaqueries.js를 사용해야 합니다.
<!--[IE 9인 경우]> <script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script> <![endif]-- >
2단계: (주의) 절대 너비, 글꼴 크기를 사용하지 마십시오.
너비:자동; / 너비:XX%;
3단계: (참고) 글꼴 크기
글꼴 크기는 페이지 기본 크기인 16픽셀의 100%입니다.
글꼴에 절대 크기 PX를 사용하지 말고 상대 크기 REM을 사용하세요.
html{글꼴 크기:62.5%;} 본문 {글꼴:일반 100% Arial,sans-serif;글꼴-크기:14px; 글꼴-크기:1.4rem }4단계: 흐름 레이아웃
유동적 레이아웃의 의미는 각 블록의 위치가 고정되지 않고 유동적이라는 것입니다.
.왼쪽{ 너비:30%; 부동:왼쪽} .오른쪽{ 너비:70%;장점은 너비가 너무 작아 두 요소를 수용할 수 없는 경우 다음 요소가 가로 방향으로 넘치지 않고 자동으로 이전 요소의 아래쪽으로 스크롤되므로 가로 스크롤 막대가 나타나는 것을 방지할 수 있다는 것입니다.
5단계: CSS 로드 선택
적응형 웹 디자인의 핵심은 CSS3에서 도입한 미디어 쿼리 모듈입니다. 화면 너비를 자동으로 감지한 후 해당 CSS 파일을 로드합니다.
<link rel=stylesheet type=text/css media=screen and (max-device-width: 600px) href=style/css/css600.css />
위 코드는 화면 너비가 600픽셀(최대 장치 너비: 600px) 미만인 경우 css600.css 파일을 로드한다는 의미입니다.
화면 너비가 600픽셀에서 980픽셀 사이인 경우 css600-980.css 파일을 로드합니다.
<link rel=stylesheet type=text/css media=screen and (최소 너비: 600px) 및 (max-device-width: 980px) href=css600-980.css />
또한 (권장하지 않음): html 태그가 포함된 CSS 파일을 로드하는 것 외에도 기존 CSS 파일에서도 로드할 수 있습니다.
@import url(css600.css) 화면 및 (최대 장치 너비: 600px);
6단계: CSS @media 규칙
@media 화면 및 (max-device-width: 400px) { .left{ float:none;} }화면이 400보다 작을 때 왼쪽은 플로팅을 취소합니다.
7단계: 이미지 적응
반응형 웹 디자인은 이미지의 자동 크기 조정도 구현해야 합니다.
img, 개체 {최대 너비: 100%;}이전 버전의 IE는 최대 너비를 지원하지 않으므로 다음과 같이 작성해야 합니다.
img {너비: 100%;}Windows 플랫폼에서 이미지 크기를 조정하면 이미지 왜곡이 발생할 수 있습니다. 이때 IE의 독점 명령을 사용해 볼 수 있습니다.
img { 너비:100%; -ms-보간-모드: 쌍입방;}또는 js--imgSizer.js를 사용하세요.
addLoadEvent(function() { var imgs = document.getElementById(content).getElementsByTagName(img); imgSizer.collate(imgs); });참고: 가능하다면 다양한 화면 크기에 따라 다양한 해상도의 이미지를 로드하는 것이 가장 좋습니다.
간단한 조작:
<style type=text/css> img{ max-width:100%;} video{ max-width:100%; height:auto;} 헤더 ul li{ float:left-list-style- 유형:없음; margin-right:10px;} 헤더 선택{display:none;} @media (최대 너비:960px){ 헤더 ul{ 디스플레이:none;} 헤더 select{ 디스플레이:inline-block;} } </style> <body> <header> <ul> <li><a href=# class=active>홈</a></li> <li><a href =#>AAA</a></li> <li><a href=#>BBB</a></li> <li><a href=#>CCC</a></li> <li ><a href=#>DD</a></li> </ul> <select> <option class=selected><a href=#>홈</a></option> <option value=/AAA>AAA</option> <option value=/BBB>BBB</option> 옵션> <옵션 값=/CCC>CCC</옵션> <옵션 값=/DDD>DDD</옵션> </select> </header> </body>위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.