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

php中世界最好的语言
풀어 주다: 2018-01-11 09:56:18
원래의
3911명이 탐색했습니다.

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

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

관련 읽기:

H5에서 드래그 앤 드롭 기능을 구현하는 방법

H5의 블록 수준 태그 요약

호환되지 않는 이전 버전의 브라우저를 처리하는 방법에 대해 H5 및 C3

위 내용은 H5 반응형 웹 디자인을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿