모바일 H5 개발 CSS 관련 내용 요약

1. 모바일 단말기 개발을 위해 필요한 헤드 구성
viewport" content="width=device-width,initial-scale=1,user-scalable=no"> ; (각 속성의 값은 소개하지 않았습니다. 개발 중에 Xiaomi(2016 Xiaomi 4)에서 user-scalable=no를 테스트했는데 작동하지 않았습니다.)
2.rem을 사용하여 font-를 설정했습니다. 루트 노드의 크기, 개발 프로세스는 Js를 사용하여 계산됩니다.
공식 320/100 = 화면 크기/글꼴 크기 값
3. 점프하려면 클릭하세요. 의미 라벨은 (dispaly: block;)
의미 를 고려할 때 a 라벨에 범위(disply: block)를 추가합니다. 컨테이너 내 범위
4. 사용자 친화적인 경험을 위해 모바일 페이지 개발 시 최대 너비와 최소 너비를 설정하세요. 예:
{
max-width:640px;
min-width:320px;
}
5. 모바일 개발 페이지의 일부 기본 스타일은
레이블 배경을 금지합니다
a,button,input,optgroup,select, textare {
// 입력, 버튼을 클릭할 때 파란색 외부 테두리와 회색 반투명도 제거
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
a 길게 누르기 금지, img 태그메뉴 표시줄이 나타납니다
a,img{
// 메뉴 표시줄을 표시하려면 길게 누르기를 비활성화하세요
-webkit-touch-callout:none;
}
부드러운 스크롤
body{
-webkit- overflow-scrolling:touch;
}

6. 한 줄 가로채기에 대해서는 하위 버전에 관계없이 http://www.cnblogs.com/victory820/p/6728904.html

7.calc를 참조하세요. (ie11 이하, Android 56 이하, Opera 모두) 호환성, 권장 사용, 편의성.

8. 박스 크기 조정을 사용하면 다양한 브라우저에서 박스 모델이 일관되지 않게 표시되는 문제가 해결됩니다. (일반적으로 모바일 단말기에서 사용됨)
content-box; 기본값 표준 모델, 너비 및 height는 테두리를 포함하지 않습니다. 내부 여백 외부 여백
padding -box; 테두리 및 여백 포함
border-box; 이상한 모델 너비와 높이에는 여백을 제외하고 패딩과 테두리가 포함됩니다.

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

p>

.parent{
position:relative;
너비:100px;
높이:100px;
배경색: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: 기본적으로 적당한 줄 간격이 자동으로 할당됩니다. 숫자 설정 숫자는 현재 글꼴 크기와 일치합니다. 곱하여 설정, 즉 배수
고정 줄 간격을 설정하는 길이
% 현재 글꼴 크기의 줄 간격 비율 기준
상위 요소에서 상속됨 ​​
이상 기억하세요 다음 공식을 사용하여 버그를 제거하세요 공백 간격 = lineHeight - 글꼴 크기
설정 상위 요소의 줄 높이가 100%이면 공백이 없습니다

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

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

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