집 > 기사 > 웹 프론트엔드 > H5 반응형 웹 디자인을 만드는 방법

H5 반응형 웹 디자인을 만드는 방법

php中世界最好的语言원래의: 2018-01-11 09:56:183899검색

이번에는 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 파일을 로드합니다.

<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>

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!