집 > 기사 > 웹 프론트엔드 > HTML의 모바일 단말기용 레이아웃 솔루션은 무엇입니까?

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

php中世界最好的语言원래의: 2018-02-22 09:15:042771검색

최근에는 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(&#39;style&#39;);
    var metaEl = document.querySelector(&#39;meta[name="viewport"]&#39;);
    var view1 = document.querySelector(&#39;#view-1&#39;);
    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 중국어 웹사이트의 다른 관련 기사를 주목하세요!