모바일 h5 개발 관련 내용 요약

1. 모바일 단말기를 개발하기 위해 필요한 헤드 구성

<meta name="
viewport
" content="
width
=device-width,initial-scale=1,user-
scala
ble=no">（各
属性
值不在介绍，在开发中小米（2016年小米4）测试user-scalable=no是不起作用的）

font-size는 개발 과정에서 Js를 사용하여 계산됩니다.
수식 320/100 = 화면 크기/글꼴 크기 값
3. 클릭하면 점프하며, 의미 라벨은 (dispaly: block;)
의미 고려 사항의 경우, 태그에 스팬(disply:block)을 추가하고, 해당 스팬에 컨테이너
를 추가합니다. 4. 모바일 페이지 개발 시 사용자 친화적인 경험을 위해 최대 너비와 최소 너비를 설정합니다. 예:

{
 
max-width
:640px;
 
min-width
:320px;
}

5. 모바일 개발 페이지의 일부 기본 스타일
라벨 배경 금지

a,button,input,optgroup,select,textare{
 // 去掉a,input,button点击时蓝色外边框和灰色半透明
 -webkit-tap-highlight-color:rgba(0,0,0,0);
}

a 길게 누르기 금지, img 라벨 메뉴바가 나타납니다

a,img{
 // 禁止长按显示菜单栏
 -webkit-touch-c
all
out:none;
}
流畅滚动
body{
 -webkit-
overflow
-scrolling:touch;
}

6. 한 줄 가로채기

7. 하위 버전(ie11 이하, Android 56 이하, Opera 모두) 호환성에 관계없이 calc 사용 , 편리하게 사용하는 것이 좋습니다.

8. 박스 크기 조정을 사용하면 다양한 브라우저에서 박스 모델이 표시되는 불일치가 해결됩니다. (모바일 단말에서 흔히 사용됨)
content-box; 기본값 표준 모델, 너비와 높이는 테두리의 내부 여백과 외부 여백을 포함하지 않습니다.
padding-box는 내부 여백을 포함하고, 테두리와 외부 여백은 포함되지 않습니다.
border-box; 이상한 모델 너비와 높이에는 외부 여백이 아닌 내부 여백과 테두리가 포함됩니다.

9. 가로 및 세로 센터링(모바일 단말기에서 흔히 사용)
단점: 작은 컨테이너의 너비와 높이를 알아야 함
형식

<p class="parent">
 <p class="child"></p>
</p>
.parent{
 
position
:relative;
 width:100px;
 height:100px;
 
background-color
:red;
}
// 注意是四个方向都是0
.child{
 position:absolute;
 
margin
:auto;
 
top
:0;
 
right
;0;
 
bottom
:0;
 
left
:0;
 width:50px;
 height:50px;
 background-color:gold;
}

10 .line- Height 설정 (모바일 단말기에서 흔히 사용됨)
normal: 기본값, 적절한 줄 간격을 자동으로 할당
number 숫자를 설정합니다. 이 숫자는 현재 글꼴 크기를 곱하여 설정됩니다. is, multiples
length는 고정된 줄 간격을 설정합니다. Spacing
% 현재 글꼴 크기의 백분율에 따른 줄 간격
상위 요소에서 상속됨 ​​ over
다음 공식을 기억하세요. 버그를 제거하는 데 사용하세요
공백 간격 = lineHeight - 글꼴 크기
공백을 제거하려면 상위 요소의 줄 높이를 100%로 설정

11. 수직 정렬아이콘을 수직 중앙에 맞추도록 조정합니다(모바일 단말기에서 흔히 사용됨)
baseline: 콘텐츠가 상위 요소의 기준선에 맞춰 정렬됩니다.
sub: 요소의 기준선이 상위 요소의 아래 첨자 기준선에 맞춰 정렬됩니다.
super: 요소의 기준선이 상위 요소의 위 첨자 기준선에 맞춰 정렬됩니다.
top: 요소의 상단과 해당 하위 항목이 전체 줄의 상단에 정렬됩니다.
text-top: The 요소의 상단은 상위 요소 글꼴의 상단에 정렬됩니다.
middel: 요소의 중심선은 상위 요소의 기준선에 정렬됩니다.
하단: 요소의 하단과 해당 하위 요소는 글꼴의 하단에 정렬됩니다. 전체 줄의 아래쪽 끝 정렬
text-bottom: 요소의 아래쪽이 상위 요소 글꼴의 아래쪽에 정렬됩니다.
percentage: 백분율은 오프셋을 지정합니다. 기준선은 0%
길이: 수치법, 기준선은 0(일반적으로 사용됨)

12.flex 사용
flex 사용 시 두 열이 고르게 분포되지 않으면 설정해 보세요. 너비를 0으로
https://csstriggers.com/ CSS 속성에 의해 트리거되는 프로세스를 확인하세요

위 내용은 모바일 h5 개발 관련 내용 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!