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 태그를 모바일 단말기의 버튼이나 텍스트 링크로 사용하는 경우 버튼을 클릭하면 다음과 같이 "어두운" 배경이 나타납니다. 코드:
모바일 측에서 클릭하면 "어두운" 배경이 나타납니다. 이때 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 사파리 상단 상태 표시줄 스타일에만 해당