디자인은 훌륭합니다. 이번에는 실제로 설계 초안을 기반으로 합니다. 이제 모든 기계는 설계 초안에 따르면 표준 기계이기 때문입니다! 개발자 동창 여러분, 이제 디자인 초안 주석을 직접 읽어보세요!
화면 적응화면 적응은 콘텐츠 적응 영역과 화면 간격 사이의 적응 관계를 의미해야 합니다.
단일 화면 적응에는 포함, 덮기 또는 채우기가 포함되며 다중 화면 적응은 일반적으로 너비를 기반으로 합니다.
포함하고 덮는 것도 공백과 초과 콘텐츠를 처리하기 위한 위치 지정이 필요합니다.
동일한 H5의 서로 다른 콘텐츠는 서로 다른 적응 방법, 즉 레이어링을 사용하는 경우가 많습니다.
선호하는 CSS화면 적응 등의 성능 문제에 대해서는 CSS로 구현할 수 있다면 CSS로 구현해야 합니다.
전체 레이어 적응각 레이어의 요소가 왜곡 없이 동시에 확장되도록 하려면 각 레이어의 적응 영역이 디자인 초안의 크기와 같아야 합니다.
직접 구현은 적응 영역과 동일한 크기의 컨테이너를 구성하고 전체 레이어를 적응시키는 것입니다.
컨테이너에는 동일한 적응 방법을 가진 여러 요소가 있을 수 있습니다.
svg 구현을 예로 들어 보겠습니다.
<!doctype html><html><body><style>.layer { 위치: 절대; 위쪽: 0; 왼쪽: 0; 너비: 100%;}</style><!-- 채우기 - -><svg class=layer viewBox=0 0 1080 1920 PreserveAspectRatio=none> <!-- 컨테이너--> <Rect x=0 y=0 width=1080 height=1920 fill=rgba(96,96,96,.08)/> <!-- 요소--></svg><!-- 중심 포함--><svg class=layer viewBox=0 0 1080 1920 PreserveAspectRatio=xMidYMid Meet> <!-- 컨테이너--> <Rect x=0 y=233 width=1080 height=1407 fill=#1565C0/> <!-- element--></svg><!-- 하단 포함--><svg class=layer viewBox=0 0 1080 1920 presentsAspectRatio=xMidYMax Meet> <!- - 컨테이너--> <직사각형 x=444 y=1779 너비=191 높이=39 fill=#1565C0/> <!-- 요소--></svg></body></html>실제 효과:
전체 레이어 적응은 구현이 간단하며 개발 중에 디자인 초안 값을 직접 읽어 대부분의 정적 페이지의 요구 사항을 충족할 수 있습니다.
하지만 h5 애니메이션이 많은 경우에는 애니메이션의 부드러움과 페이지의 성능을 고려해야 합니다.
<img> <object> <svg> 등의 교체 가능한 요소를 컨테이너로 사용하고, 배경 이미지를 요소로 사용하세요.
CSS 애니메이션을 적용할 때 성능 결함이 있습니다.
이러한 구현의 성능을 향상하려면 컨테이너 애니메이션에 중점을 두고 컨테이너 크기를 줄여야 합니다. 간소화된 적응을 위해서는 레이어에 있는 모든 요소의 최소 총 영역과 동일해야 합니다.
단순화된 적응 공식파생 프로세스는 H5 계층 화면 적응 공식 파생을 참조하세요.
디자인 초안의 너비는 v이고 높이는 g입니다. 너비는 w입니다. 너비는 컨테이너의 수평 좌표입니다. x3 = m*u + (x - m*v)/w*w1 = m*v/w*w3 + (x - m*v)/w*w1 세로 좌표 y4 = n*f + (y - n*g)/h*h1 = n*g/h*h3 + (y - n*g)/h*h1 너비 w3 = (w/v)*u 높이 h3 = (h/g)*f 포함 시 방법을 적용할 때 스케일링 값 s = Math.min(f/g, u/v) 왼쪽 가로 공백이 전체 공백을 차지합니다. o = (m*v - x)/w 세로 공백이 차지합니다. 총 공백 p = ( n*g- y)/h 커버 모드가 적용되면 스케일링 값 s = Math.max(f/g, u/v) 수평 왼쪽 초과는 총 초과를 설명합니다. o = (x - m*v)/w 수직 초과는 총 초과를 나타냅니다. p = (y - n*g)/h 적응 영역이 수직 상단에 있을 때 m = 0입니다. 수직 중앙에 있을 때 m = .5입니다. m = 1. 수평으로 왼쪽에 있을 때 n = 0. 수평으로 중앙에 있을 때 n = .5. 오른쪽 가로로 보면 전체 계층 적응 메모리 최적화에 비해 n = 1 (w3*h3)/(v1*g1) >= w*h/(v*g)<img> 구현 예
max-width가 w/v이고 max-height가 h/g일 때, containadaptation에 해당합니다.
min-width를 w/v로 설정하고 min-height를 h/g로 설정하면 피복 적응에 해당합니다.
너비가 w/v이고 높이가 h/g인 경우 채우기 적응을 의미합니다.
포함 조정 중에 이미지의 원래 크기가 max-width 및 max-height보다 작은 경우 Zoom: 10을 사용하여 이미지의 원래 크기를 확대하거나 직접 수정합니다.
표지 적응 중에 이미지의 원래 크기가 최소 너비 및 최소 높이보다 큰 경우 Zoom: .1을 사용하여 이미지의 원래 크기를 줄이거나 직접 수정합니다.
왼쪽 상단의 백분율은 화면 너비 u 및 높이 f에 상대적이므로 m*u 및 n*f에 해당합니다.
변환의 백분율은 조정된 요소의 너비 w1 및 높이 h1에 상대적이므로 (m*v + x)/w*w1 및 (n*f + y)/h*h1에 해당합니다.
<!doctype html><html><body><style>img { /* min-width 및 min-height는 가상 컨테이너를 구성합니다*/ min-width: 50.37037037037037% /* w3 = (w/v)*u 여기서 w = 544, v = 1080 */ 최소 높이: 7.395833333333333%; /* h3 = (h/g)*f 여기서 h = 142, g = 1920 */ Zoom: .1; /* x4 = m*u + (x - m*v)/w*w1 */ /* y4 = n*f + (y - n*g)/h*h1 */ 위치: 왼쪽: 50%; 여기서 m = .5*/ 상단: 50%; /* n*f 여기서 n = .5 */ 변환: 변환X(-48.34558823529412%) /* (x - m*v)/w*w1 여기서 x = 277, m = .5, v = 1080, w = 544 */ translateY(378.8732394366197%); /* (y - n*g)/h*h1 여기서 y = 1498, n = .5, g = 1920, h = 142 */}</style><img src=http:/ /ui.qzone.com/544x142/> <!-- 요소 --></body></html> 배경 구현 예background-size 값이 contain 경우 포함 적응에 해당합니다.background-size 값이 cover 인 경우 Cover Adaptation에 해당합니다.background-size 값이 100% 100% '채우기 적응'에 해당합니다.background-position 백분율은 o 와 같은 p 갖습니다. <!doctype html><html><body><style>div { 위치: 절대; 너비: 50.37037037037037%; /* w3 = w/v*u 여기서 w = 544, v = 1080 */ 높이: 7.395833333333333%; * h3 = h/g*f 여기서 h = 142, g = 1920 */ background: url(http://ui.qzone.com/544x142) no-repeat; /* 요소로서의 배경 이미지*/ background-size: left: 25.64814814814815% /* x3 = x/v* u 여기서 x = 277, v = 1080 */ 상단: 78.02083333333333%; /* y3 = y/g*f 여기서 y = 1498, g = 1920 */ background-position-x: -48.34558823529412% /* o = (x - m*v)/w 여기서 m = .5 , v = 1080, x = 277, w = 544*/ 배경 위치-y: 378.8732394366197%; /* p = (y - n*g)/h 여기서 n = .5, g = 1920, y = 1498, h = 142*/}</style>< div></div> <!-- 컨테이너--></body></html><svg> 구현 예
preserveAspectRatio 의 meetOrSlice meet 되면 Adaptation을 포함하는 것에 해당합니다.preserveAspectRatio 의 meetOrSlice slice 인 경우 Cover Adaptation에 해당합니다.preserveAspectRatio 값이 none 인 경우 채우기 적응에 해당합니다.preserveAspectRatio 의 meetOrSlice 적응 영역이 아닌 컨테이너를 기준으로 합니다. transform 컨테이너를 배치하는 데 사용되며 preserveAspectRatio 의 meetOrSlice xMinYMin 으로 고정됩니다. <!doctype html><html><body><style>svg { 위치: 절대; 너비: 50.37037037037037%; 높이: 7.39583333333333% /* x4 = m*v/w*w3 + (x - m*v)/ w*w1 */ /* y4 = n*g/h*h3 + (y - n*g)/h*h1 */ 위쪽: 0; 왼쪽: 0; 변환: 변환X(99.26470588235294%) /* m*v/w*w3 여기서 m = .5, v = 1080, w = 544 */ 변환Y (676.056338028169%); /* n*g/h*h3 여기서 n = .5, g = 1920, h = 142 */ 오버플로: visible;}svg 이미지 { 변환: 번역X(-48.34558823529412%) /* (x - m*v)/w*w1 여기서 x = 277, m = .5, v = 1080 , w = 544 */translateY(378.8732394366197%); /* (y - n*g)/h*h1 여기서 y = 1498, n = .5, g = 1920, h = 142 */}</style><svg viewBox=0 0 544 142 presentsAspectRatio=xMinYMin Meet> <!-- 컨테이너--> <이미지 너비=544 높이=142 xlink:href=http://ui.qzone.com/544x142/> <!-- 요소 --></svg></body></html> 보조 도구수동으로 백분율을 계산하고 CSS를 작성하는 것은 번거로운 일이지만 sass와 같은 도구를 사용하면 이를 단순화할 수 있습니다.
디자인 초안의 너비 v 와 높이 g 일반적으로 페이지 수준 상수입니다.
디자인 초안에 있는 각 요소의 가로좌표 x , 세로좌표 y , 너비 w 및 높이 h 를 읽으면 도구가 CSS를 생성합니다.
이제 어머니는 더 이상 나의 복원 문제나 화면 적응 문제에 대해 걱정하실 필요가 없습니다.
워드 프로세싱 텍스트가 고정되었거나 한 줄이 고정되지 않은 경우 svg text 태그로 처리할 수 있습니다.
텍스트가 고정되어 있거나 한 줄도 고정되지 않은 경우 텍스트를 그림으로 변환할 수도 있습니다.
여러 줄의 텍스트는 고정되지 않습니다. svg 의 foreignObject 사용하여 일반 div
요금제 비교
화면 적응 솔루션은 다양합니다. 전체 계층 적응과 간소화된 적응을 달성하려면 어떤 방법을 선택해야 합니까?
| 계획 | 줌 | 위치 | 텍스트 줌 | 호환 가능 |
|---|---|---|---|---|
| 패딩 상단 비율 | 관대할 수 밖에 없다 | ✓ | ✗ | ✓ |
| 뷰포트 | ✓ | ✗ | ✓ | 지원이 복잡함 |
| 객체에 딱 맞는 | ✓ | ✓ | ✗ | 모바일 안드로이드 4.4.4+ |
| svg 보존 비율 | ✓ | ✓ | ✓ | 모바일 안드로이드 3.0+ |
| (최대/최소)-(너비/높이) | ✓ | ✓ | 고정 텍스트 | ✓ |
| 배경 크기 | ✓ | ✓ | 텍스트를 그림으로 | ✓ |
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.