H5 모바일 단말기 지식 포인트 요약

H5 모바일 단말 지식 포인트 요약

디렉토리 읽기

모바일 개발 기본 지식 포인트

calc의 기본 사용법

이해 및 사용 box-sizing

display:box의 레이아웃 이해

flex 레이아웃 이해

Flex 레이아웃 호환성 지식 포인트 요약

맨 위로

모바일 개발 기본지식 포인트

1. rem을 단위로 사용하세요

html { font-size: 100px; }
@media(min-width: 320px) { html { font-size: 100px; } }
@media(min-width: 360px) { html { font-size: 112.5px; } }
@media(min-width: 400px) { html { font-size: 125px; } }
@media(min-width: 640px) { html { font-size: 200px; } }

휴대폰의 경우 글꼴 크기를 100px로 설정하고, 320px 휴대폰의 경우 매칭은 100px로 설정합니다. 휴대폰은 동일한 비율이므로 디자인 초안은 몇 픽셀입니까? rem으로 변환하면 rem = 디자인 초안의 픽셀/100;

2. as a, 버튼, 입력, optgroup, select, textarea

a 태그를 모바일 단말기의 버튼이나 텍스트 링크로 사용하는 경우 버튼을 클릭하면 다음과 같이 "어두운" 배경이 나타납니다. 코드:

버튼1

모바일 측에서 클릭하면 "어두운" 배경이 나타납니다. 이때 CSS에 다음 코드를 추가하면 됩니다:

a,button,input,optgroup,select,textarea{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

3. 메타 기본 지식 포인트:

1. 페이지 창은 자동으로 장치 너비에 맞게 조정되며 사용자는 페이지 크기를 조정하는 것이 금지됩니다.

<meta>

속성의 기본 의미:

content="width=device-width:

뷰포트의 크기를 제어합니다. device-width는 장치의 너비입니다.

초기 배율 - 초기 확대/축소 비율

minimum-scale - 사용자가 확대/축소할 수 있는 최소 배율

maximum-scale - 사용자의 최대 배율

확대 가능 - 사용자가 수동으로 확대/축소할 수 있는지 여부

2. 페이지 내 숫자를 전화번호로 인식 무시

3. Android 플랫폼에서 이메일 주소 인식 무시

4. 홈 화면 빠른 시작 방법에 웹사이트를 추가한 경우, 주소 표시줄을 숨길 수 있습니다. iOS Safari에서만 가능

5. 홈 화면 빠른 실행 모드에 웹사이트 추가, iOS 사파리 상단 상태 표시줄 스타일에만 해당