최근에는 Taobao, Tmall 및 NetEase Lottery 163의 WAP 홈페이지 스타일 레이아웃을 연구했습니다. 오늘은 몇 가지 모바일 레이아웃 계획을 요약하고 사용된 기술의 장단점을 분석하겠습니다.
참고: 코드는 파일 프로토콜을 사용하여 실행됩니다. Chrome에서는 로컬 파일에 대한 참조가 지원되지 않으며, Firefox 또는 Safari로 열 수 있습니다.
wty2368
모바일 레이아웃 살펴보기 plan
Taobao, Tmall 및 NetEase Lottery 163의 wap 홈페이지 스타일 레이아웃을 연구하여 모바일 레이아웃 계획을 요약했습니다.
참고: 코드는 파일 프로토콜을 사용하여 실행되며 Chrome에서는 로컬 파일에 대한 참조가 지원되지 않으며 도메인 간 오류가 발생합니다. Firefox나 Safari로 열 수 있습니다
당시 제작된 ppt 다운로드: 2015년 12월 모바일 레이아웃 계획 연구
1. 기본 개념
1. 물리적 픽셀은 가장 작은 물리적 픽셀입니다. 디스플레이 위의 표시 단위(휴대폰 화면)
2 .장치 독립적 픽셀(밀도 독립적 픽셀)
디바이스 독립적 픽셀(밀도 독립적 픽셀이라고도 함)은 컴퓨터 좌표계의 한 점으로 생각할 수 있습니다. . 이 점은 프로그램에서 사용할 수 있는 가상 픽셀을 나타냅니다(예: CSS 픽셀 )
3. 비트맵 픽셀
비트맵 픽셀은 래스터 이미지(예: png, jpg, gif, 등.). 각 비트맵 픽셀에는 자체 디스플레이 정보(예: 디스플레이 위치, 색상 값, 투명도 등)가 포함되어 있습니다.
4. 장치 픽셀 비율(dpr이라고 함)
장치 픽셀 비율 = 물리적 픽셀 / 장치 독립적 픽셀( 특정 방향, x 방향 또는 y 방향)
5. scale
Scale 비율:
scale = 1/dpr
6. 완벽한 뷰포트
<meta name="viewport" content="initial-scale=1,width=device-width,user-scalable=0,maximum-scale=1" />
2. NetEase Lottery 디자인 계획
NetEase Lottery
스케일 = 1.0을 사용하세요. 뷰포트
media query를 사용하여 html 루트 요소의 font-size 값, 즉 rem 값 rem + 백분율 레이아웃
미디어 쿼리의 CSS 코드는 다음과 같습니다.
//网易彩票的响应式布局是采用媒体查询来改变rem值实现的 //媒体查询css#media-query{ @media screen and (min-width: 240px) { html,body,button,input,select,textarea { font-size:9px!important; } } @media screen and (min-width: 320px) { html,body,button,input,select,textarea { font-size:12px!important; } } @media screen and (min-width: 374px) { html,body,button,input,select,textarea { font-size:14px!important; } } @media screen and (min-width: 400px) { html,body,button,input,select,textarea { font-size:15px!important; } } // 省略 }
3. Tmall 디자인 계획
day 고양이 홈페이지
는 scale = 1.0 하드 코딩된 뷰포트
를 채택하고 rem을 사용하지 않으며, 본문의 글꼴 크기 = 14px를 하드 코딩
px + flexbox 레이아웃
4. 문제 발생
1. 고화질 화면(dpr>1) 1px 선 흐림 문제
대부분의 경우 디자이너가 다양한 크기의 원고를 제작할 때 먼저 큰 크기(보통 2x) 원고를 그린 다음 크기를 줄입니다. 크기를 조정하고 마지막으로 내보냅니다. 이로 인해 문제가 발생합니다. 디자이너가 2x 원고에 1px 선(예: 테두리: 1px)을 그리는 경우 scale=1.0으로 표시하려고 하면 0.5px가 되어 매우 커집니다. 일부 휴대폰에서는 불가능합니다. 0.5px를 그립니다.
이론적으로 1개의 비트맵 픽셀은 1개의 물리적 픽셀에 해당하므로 그림이 완벽하고 선명하게 표시될 수 있습니다. 일반 화면에서는 문제가 없지만 레티나 화면(dpr=2)에서는 비트맵의 픽셀이 충분하지 않아 그림이 흐릿하게 보입니다.
2. 고화질 화면에서 고화질 사진의 흐림 문제(dpr>1)
dpr=2인 레티나 화면의 경우 단일 비트맵 픽셀은 더 이상 나눌 수 없기 때문에 1개의 비트맵 픽셀은 4개의 물리적 픽셀에 해당합니다. , 가장 가까운 색상만 선택할 수 있으므로 그림이 흐릿해집니다(위의 색상 값 참고). 따라서 고화질 사진의 문제에 대해서는 사진을 두 배로 사용하는 것이 더 나은 해결책입니다. 예: 200×300(css 픽셀)
img 태그, 400×600 이미지를 제공해야 합니다. dpr=2인 레티나 화면의 경우 1비트맵 픽셀은 4개의 물리적 픽셀에 해당합니다. 단일 비트맵 픽셀은 더 이상 나눌 수 없기 때문에 가장 가까운 위치에서만 색상을 가져올 수 있어 사진이 흐려집니다(위의 몇 가지 사항에 유의하세요). 포인트). 색상 값). 따라서 고화질 사진의 문제에 대해서는 사진을 두 배로 사용하는 것이 더 나은 해결책입니다. 예를 들어 200×300(css 픽셀) img 태그인 경우 400×600 이미지를 제공해야 합니다.
5. 궁극적인 솔루션 --> Taobao 디자인 계획
Taobao 홈페이지
js 처리를 통해 휴대폰의 dpr 매개변수를 얻은 다음 시점을 동적으로 생성합니다.
휴대폰의 물리적 픽셀 너비를 구하고 10개로 나누어서 각 부분의 너비는 렘의 크기입니다.
디자인 도안의 크기(px)에 따라 px+rem 레이아웃을 사용하여 3가지 상황으로 처리합니다.
해당 스크립트는 다음과 같습니다.
$(document).ready(function(){ var dpr, rem, scale; var docEl = document.documentElement; var fontEl = document.createElement('style'); var metaEl = document.querySelector('meta[name="viewport"]'); var view1 = document.querySelector('#view-1'); if(window.screen.width < 540){ dpr = window.devicePixelRatio || 1; scale = 1 / dpr; rem = docEl.clientWidth * dpr / 10; }else{ dpr = 1; scale =1; rem = 54; }//貌似最新的淘宝网站又去掉了,只是限制了主体内容的宽度 // 设置viewport,进行缩放,达到高清效果 metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no'); // 设置整体div的宽高 view1.setAttribute('style', 'width:'+ docEl.clientWidth+'px; height:'+ docEl.clientHeight+'px'); // 设置data-dpr属性,留作的css hack之用 docEl.setAttribute('data-dpr', dpr); // 动态写入样式 docEl.firstElementChild.appendChild(fontEl); fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}'; $('body').attr('style', 'font-size:' + dpr * 12 +'px'); // 给js调用的,某一dpr下rem和px之间的转换函数 window.rem2px = function(v) { v = parseFloat(v); return v * rem; }; window.px2rem = function(v) { v = parseFloat(v); return v / rem; }; window.dpr = dpr; window.rem = rem;})
6. 디자인 계획 요약
위에서 분석하면 보기 어렵지 않습니다:
NetEase Lottery의 솔루션은 시작이 빠르고 개발 효율성이 높으며 호환성이 좋지만 충분히 유연하고 정확하지 않습니다.
Tmall의 디자인 아이디어는 비교적 간단하고 flexbox는 매우 유연합니다. , 그러나 Flexbox의 호환성은 신중하게 처리되어야 하며 충분히 정확하지 않습니다.
Taobao의 솔루션은 모바일 단말기에서 발생하는 거의 모든 문제를 해결하고 완벽한 솔루션이지만 개발 효율성이 낮고 비용이 상대적으로 높습니다.
이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
관련 자료:
HTML에서 스크롤 막대 사용에 대한 팁은 무엇입니까?
트리거 방법을 사용하여 클릭하지 않고 파일 선택 대화 상자를 팝업하는 방법 파일 형식 입력
위 내용은 HTML의 모바일 단말기용 레이아웃 솔루션은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!