이동단 맞춤형rem 레이아웃 방안

1. 장치의 css 픽셀은 다르다
1. CSS 픽셀(논리 픽셀)

은 브라우저 F12 컨트롤러를 통해 서로 다른 모델의 css 픽셀을 볼 수 있다. 예를 들어 아이폰6는 375px, 아이폰6플러스는 414px

이다.

CSS에 사용된 추상적인 개념의 단위는 px

의 값은 상대적인 것이지 절대적인

이 아니다
2. 장치 픽셀(물리적 픽셀)

화면의 물리적 픽셀, 모든 장치 화면의 물리적 픽셀 수량은 고정불변, 단위는 pt(점)

은 일반적으로 핸드폰의 해상도

을 가리킨다

1pt = 1/72인치(inch)

3. 픽셀 비율(DPR)

물리 픽셀 = css 픽셀 * DPR 본질: css 픽셀이 몇 개의 장치 픽셀을 차지합니다: window.devicePixelRatio

iphone6 750 × 1334 장치 픽셀, 화면 해상도 375× 667 css 픽셀, 브라우저에서 html의 폭은 375px 2.0 픽셀은 DPR

보다
viewport 시각적 창 설정
meta 태그 설정, name="viewport"1. 콘텐츠 뷰포트의 관련 설정

width 뷰포트의 너비, 값은 정수 또는 문자열 device-width(장치의 실제 너비 - css 픽셀)입니다.숫자 설정이 권장되지 않음(안드로이드 장치는 일부 지원되지 않음)

height 뷰포트의 높이(width에서 1까지)

user-scalable 사용자가 페이지 확대/축소를 허용할지 여부

initial-scale페이지의 초기 크기 조정 값은 숫자(소수 포함)입니다.

minimum-scale페이지의 최소 크기 조정 비율은 숫자(소수 포함)입니다.

maximum-scale페이지의 최대 크기 조정 비율은 숫자(소수 포함)입니다.

2. 주의사항

가끔은 줌을 허용하지 않는다고 적고 최소와 최대로 줌할 수 있는 비율을 적는 것을 보실 수 있습니다. 그러면 충돌이 아닙니다. 왜 줌을 허용하지 않는다고 적었는데 그런 것들을 써야 합니까?원인:

 1、              user-scalable，                   ，     。          
 2、 iphone5      
 3、     ，      bug

ios10은user-scalable=no를 지원하지 않습니다. 다음 이벤트 해결(document의touchstart의 기본 행동을 막습니다)

3. 권장 설정
사용자 배율을 허용하지 않습니다. 기본 고정 배율은 1.0입니다.

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

3. 이동단 브라우저 스타일 리셋
html,body를 전체 장치의 화면을 가득 채웁니다.기본 Margin, padding 제거

html,body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

안드로이드와 OS의 다른 스타일

body{
    font-family: helvetica;
    margin: 0;
}
body *{
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: 100%;
}
a,input,button{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
button,input{
    -webkit-appearance: none;
    border-radius: 0;
}
input::-webkit-input-placeholder{
    color:#000;
}
input:focus::-webkit-input-placeholder{
    color:#f00;
}

이동단의 스타일 재설정

사용자 선택 금지, 안드로이드 무효, 터치start 차단 후 기본 행동으로 -webkit-user-select: none;

팝업 시스템 메뉴 길게 누르기 금지 -webkit-touch-callout: none;

안드로이드에서 a/button/input 탭을 눌렀을 때 발생하는 테두리 제거 & ios에서 a 탭을 눌렀을 때 발생하는 반투명 회색 배경 제거 -webkit-tap-highlight-color: rgba(0,0,0,0);

가로세로 화면을 전환하거나 사용자가 브라우저를 통해 설정하면 글꼴의 크기를 변경할 수 있습니다(바디의 모든 요소에 필요함) -webkit-text-size-adjust: 100%;

버튼은 ios에서 모두 원각

-webkit-appearance: none;	//button input        
border-radius: 0;	//input

수정 placeholder 스타일

input::-webkit-input-placeholder{
    color:#000;	//     
}
input:focus::-webkit-input-placeholder{
    color:#f00;	//      
}

글꼴

ios 기본 중국어 글꼴은 Heiti SC 기본 영어 글꼴은 Helvetica 기본 숫자 글꼴은 Helvetica Neue Microsoft Ahlize 글꼴 없음

android 기본 중국어 글꼴은 Droidsansfallback 기본 영문과 숫자 글꼴은 Droid Sans 무마이크로소프트 블랙 글꼴

font-family: helvetica;

4. 상대 단위em와rem
1. em는 부모 레벨에 상대적
font-size의 단위일 때 부모 요소의 글꼴 크기를 대표하고 다른 속성 단위일 때 자신의 글꼴 크기를 대표한다

.parent{
    font-size:20px
}
.son{
    width:1em;
    /* 1em=20px */
}

문제: 1. 크롬 아래에 최소 글꼴 제한이 있고 12px가 필요하기 때문에 이 값은 122보다 작을 수 없습니다. 만약에 두 개의 같은 요소가 있지만 안의 글꼴이 다르면 통일적으로 설정할 수 없습니다.혹은 원소의 글씨체가 변하면 또 통일적으로 한 번 설정해야 한다
2.rem은 루트 요소 html에 상대적
CSS3에 추가된 상대 단위는 루트 요소 html 글꼴 크기에 대한 상대 단위입니다

html{
    font-size:20px
}		
/* 2rem=40px */

em와rem는 모두 상대 단위이다. 다른 점은em가 부급에 대한 font-size라는 데 있다.rem는 뿌리 노드 html에 상대적인 font-size
5.rem 구조 원리
아이폰6의 경우
브라우저 F12 콘솔을 통해 아이폰6의 css 픽셀 375px을 볼 수 있습니다

<style>
    html {
        font-size: 100px;
    }

    html,
    body {
        margin: 0;
        padding: 0;
    }

    header {
        width: 3.75rem;
        font-size: 0.2rem;
        background: #007ACC;
    }

    div {
        width: 1.875rem;
        height: 1.875rem;
        font-size: 0.12rem;
        background: #07C160;
    }
style>

<body>
    <header>    header>
    <div>       div>
body>

html의 font-size를 100px(정상적으로 개발할 때 html 루트 노드의 글꼴 크기를 동적으로 설정) 하위 요소의 폭을 모두rem로 설정하면 모든 하위 요소의 css 폭 = 루트 노드의 글꼴 크기 *에 대응하는rem는 위의 예에서

헤더의 폭: 375px = 100 * 3.75rem

div의 폭: 187.5 = 100 * 1.875rem

아이폰6의 css 픽셀은 375px입니다. 이 때 헤더는 화면을 가득 채우고div는 화면 폭의 절반을 차지합니다.
아이폰6플러스의 경우
아이폰6플러스의 css 픽셀은 414px입니다. 이때 루트 노드 html의 글꼴 크기는 110.4px이고 하위 요소는 아무런 변화가 없습니다.

html {
    font-size: 110.4px;
    /* 414 / 3.75 = 110.4 */
}

헤더의 폭: 414px = 110.4 * 3.75rem

div의 폭: 207px = 110.4 * 1.875rem

이 때 헤더가 화면 넓이를 차지하고 div는 화면 넓이의 절반을 차지하는 것을 의외로 볼 수 있습니다.우리는 html의 글씨체 크기만 바꿔서 이런 기능을 실현했다
서브원소는 html에 따라 비례적으로 변화한다
rem의 레이아웃 원리는 루트 노드의 글꼴 크기를 동적으로 바꾸어 rem 단위가 설정된 모든 하위 요소의 크기에 영향을 주고 요소의 크기와 화면 크기가 비례적인 동기화 변화를 확보하는 것이다
그러면 어떻게 하위 요소를 몇rem로 설정합니까?현재 시중 은 통상 아이폰6 을 표준 으로 하고, 디자인 원고 사이즈 는 보통 750px 로 계산하기 편리하다
6, 동적 설정 루트 노드 글꼴 크기
아이폰6 기준, 디자인 아트 사이즈 750px

(function(doc, designWidth) {
    const html = doc.documentElement;
 
    const refreshRem = () => {
        const clientWidth = html.clientWidth;
        if (clientWidth >= designWidth) { 
            //        ，                  ，        （       ）
            html.style.fontSize = '100px';
        } else {
            // iPhone6  ：        50px = 100 * (375 / 750)
            html.style.fontSize = 100 * (clientWidth / designWidth) + 'px';
        }
    };
    
    //dom        
    doc.addEventListener('DOMContentLoaded', refreshRem);
})(document, 750);

위의 즉시 실행 함수를 통해 아이폰6에서 루트 노드의 글꼴 크기를 50px로 설정합니다
그러면 화면 폭을 가득 채우려면 하위 요소의 폭을 width:7.5rem;으로 절반을 차지하고 width:3.75rem;으로 설정해야 한다.원래의 100px에 비해 750의 디자인 원고를 기준으로 계산할 때 나타나는 소수점을 비교적 적게 하여 계산하기 편리하게 할 수 있다.
물론sass나less로 px2rem() 함수를 작성하여 px를rem로 자동으로 변환하여 코드 작성에 편리하게 할 수 있다
7. vw를 통해 루트 노드의 글꼴 크기 설정
vw, vh 단위

vw Viewport's width의 약자, 1vw는 뷰포트 너비의 1%

vh Viewport's height의 약자, 1vh는 뷰포트 높이의 1%

vmin vw와 vh 중 가장 작은 값

vmax vw와 vh 중 가장 큰 값

호환성 문제
ios 8 및 그 이상의 시스템 안드로이드 4.4 및 그 이상의 시스템은 현재 대부분의 모바일 기기에서 vw를 지원한다
vw+rem 어댑터
vw를 통해 루트 노드의 글꼴 크기를 설정합니다. 페이지의 크기는rem를 사용합니다
iphone6 1vw=375/100=3.75px;
iphone6Plus 1vw=414/100=4.14px;
아이폰6 디자인 원고를 예로 들면 html의 font-size는 50px, 1vw=3.75px는 vw가 50 / 3.75 = 13.333333333333334vw으로 전환된다.

<style>
html{
    font-size:13.333333333333334vw
    /* font-size: calc(50vw/3.75); */
}
/*        */
header {
    width: 7.5rem;
    font-size: 0.4rem;
    background: #007ACC;
}
/*      */
div {
    width: 3.75rem;
    height: 3.75rem;
    font-size: 0.2rem;
    background: #07C160;
}
style>

<body>
    <header>    header>
    <div>       div>
body>

이동단 맞춤형rem 레이아웃 방안

좋은 웹페이지 즐겨찾기