HTML의 모바일 단말기용 레이아웃 솔루션은 무엇입니까?

최근에는 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(&#39;content&#39;, &#39;width=&#39; + dpr * docEl.clientWidth + &#39;,initial-scale=&#39; + scale + &#39;,maximum-scale=&#39; + scale + &#39;, minimum-scale=&#39; + scale + &#39;,user-scalable=no&#39;);
    // 设置整体div的宽高
    view1.setAttribute(&#39;style&#39;, &#39;width:&#39;+ docEl.clientWidth+&#39;px; height:&#39;+ docEl.clientHeight+&#39;px&#39;);
    // 设置data-dpr属性，留作的css hack之用
    docEl.setAttribute(&#39;data-dpr&#39;, dpr);
    // 动态写入样式
    docEl.firstElementChild.appendChild(fontEl);
    fontEl.innerHTML = &#39;html{font-size:&#39; + rem + &#39;px!important;}&#39;;
    $(&#39;body&#39;).attr(&#39;style&#39;, &#39;font-size:&#39; + dpr * 12 +&#39;px&#39;);
    // 给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은 2초 안에 다른 페이지로 이동합니다.

트리거 방법을 사용하여 클릭하지 않고 파일 선택 대화 상자를 팝업하는 방법 파일 형식 입력

태그에서 다른 속성을 숨기고 그림만 표시하는 방법

위 내용은 HTML의 모바일 단말기용 레이아웃 솔루션은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!