이번에는 H5 반응형 웹 디자인을 만드는 방법과 H5 반응형 웹 디자인의 주의 사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.
이 글에서는 HTML5 반응형(적응형) 웹 디자인의 구현을 소개하고 이를 모든 사람과 공유합니다. 세부 사항은 다음과 같습니다.
1단계: 웹 페이지 코드 헤드에 뷰포트 메타 태그 줄 추가
<meta name="viewport" content="width=device-width, initial-scale=1" />
viewport는 웹 페이지의 기본 너비와 높이입니다. 위 코드 줄은 웹 페이지의 너비가 기본적으로 화면 너비(너비=장치 너비)와 동일하고 원래 크기 조정 비율( initial-scale=1)은 1.0입니다. 즉, 웹페이지의 초기 크기가 화면 영역을 100% 차지합니다.
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단계: (주의) 절대 너비, 글꼴 크기를 사용하지 마세요
width:auto; / width:XX%;
3단계: (주의) 글꼴 크기
글꼴 크기는 페이지 기본 크기인 16픽셀의 100%입니다.
글꼴에 절대 크기 "PX"를 사용하지 말고 상대 크기 "REM"을 사용하세요
4단계: 유동 레이아웃
"유동 레이아웃"의 의미는 각 블록의 위치가 고정되지 않고 부동이라는 것입니다.
폭이 너무 작아서 두 요소에 맞지 않는 경우 다음 요소가 자동으로 스크롤된다는 장점이 있습니다. 아래에서는 가로 스크롤 막대가 나타나지 않도록 가로 방향으로 오버플로되지 않습니다. 5단계: CSS 로드를 선택합니다. "적응형 웹 디자인"의 핵심은 CSS3에서 도입한 미디어 쿼리 모듈입니다. 화면 너비를 자동으로 감지한 다음 해당 CSS 파일을 로드합니다. 관련 읽기: 호환되지 않는 이전 버전의 브라우저를 처리하는 방법에 대해 H5 및 C3 위 내용은 H5 반응형 웹 디자인을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!<style type="text/css">
img{ max-width:100%;}
video{ max-width:100%; height:auto;}
header ul li{ float:left; list-style:none; list-style-type:none; margin-right:10px;}
header select{display:none;}
@media (max-width:960px){
header ul{ display:none;}
header select{ display:inline-block;}
}
</style>
<body>
<header>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">AAA</a></li>
<li><a href="#">BBB</a></li>
<li><a href="#">CCC</a></li>
<li><a href="#">DDD</a></li>
</ul>
<select>
<option class="selected"><a href="#">Home</a></option>
<option value="/AAA">AAA</option>
<option value="/BBB">BBB</option>
<option value="/CCC">CCC</option>
<option value="/DDD">DDD</option>
</select>
</header>
</body>