一文看懂移动端适配

if (!dpr && !scale) {
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    // 如果是iphone，则根据window.devicePixelRatio获取dpr
    if (isIPhone) {
        // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
        if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                
            dpr = 3;
        } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
            dpr = 2;
        } else {
            dpr = 1;
        }
    } else {
        // 其他设备下，仍旧使用1倍的方案
        dpr = 1;
    }
    // 计算缩放比例
    scale = 1 / dpr;
}

// 设置data-dpr属性，以便可以通过css属性选择器做一些样式处理
docEl.setAttribute('data-dpr', dpr);

// 设置meta标签
if (!metaEl) {
    metaEl = doc.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    // 设置initial-scale的值
    metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
    if (docEl.firstElementChild) {
        docEl.firstElementChild.appendChild(metaEl);
    } else {
        var wrap = doc.createElement('div');
        wrap.appendChild(metaEl);
        doc.write(wrap.innerHTML);
    }
}

function refreshRem(){
    var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
        width = 540 * dpr;
    }
    // 将docuemntElement宽度分成10份，用于等比缩放
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}

// 监听resize事件，如果触发resize事件，重新设置根元素的font-size
win.addEventListener('resize', function() {
    clearTimeout(tid);
    tid = setTimeout(refreshRem, 300);
}, false);


win.addEventListener('pageshow', function(e) {
    if (e.persisted) {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }
}, false);

refreshRem();

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

.wrap {
    font-size: 0;
}

.box1, .box2 {
    display: inline-block;
}

.box1 {
    width: 200px;
    height: 100px;  
    background-color: yellow;
}

.box2 {
    width: 175px;
    height: 100px;  
    background-color: blue;
}

<div class="wrap">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

.wrap {
    font-size: 0;
}

.box1, .box2 {
    display: inline-block;
}

.box1 {
    width: 5.333333333333333rem; // 1rem=375px,那么200px就是200/37.5 = 5.333333333333333rem
    height: 2.6666666666666665rem;   // 2.6666666666666665rem
    background-color: yellow;
}

.box2 {
    width: 4.666666666666667rem; // 4.666666666666667rem，也就是.box1的width+.box2的width=10rem
    height: 2.6666666666666665rem;  // 2.6666666666666665rem
    background-color: blue;
}

<div class="wrap">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

<script>
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'
</script>

.wrap {
    font-size: 0;
}

.box1, .box2 {
    display: inline-block;
}

.box1 {
    width: 5.333333333333333rem; // 1rem=375px,那么200px就是200/37.5 = 5.333333333333333rem
    height: 2.6666666666666665rem;   // 2.6666666666666665rem
    background-color: yellow;
}

.box2 {
    width: 4.666666666666667rem; // 4.666666666666667rem，也就是.box1的width+.box2的width=10rem
    height: 2.6666666666666665rem;  // 2.6666666666666665rem
    background-color: blue;
}
.list1, .list2 {
    list-style: none;
    font-size: 16px;
    line-height: 44px;
}
.list1 li {
    border-bottom: 1px solid #ccc;
}

.list2 li {
    border-bottom: 0.5px solid #ccc;
}

<div class="wrap">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
<ul class="list1">
    <li>小明</li>
    <li>小黑</li>
    <li>小白</li>
</ul>
<ul class="list2">
    <li>小明</li>
    <li>小黑</li>
    <li>小白</li>
</ul>

<script>
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'

</script>

const dpr = window.devicePixelRatio
const meta = document.createElement('meta')
meta.setAttribute('name', 'viewport')
meta.setAttribute('content', `initial-scale=${1 / dpr}, user-scalable=no`)
document.head.appendChild(meta)
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'

.img1 {
    width: 6.933333333333334rem;
    height: 4.8rem;
}

<div>
    <p>
        260px*180px
    </p>
    <img class="img1" src="../static/image/bg.png" alt="" />
</div>
<div>
    <p>
        520px*360px
    </p>
    <img class="img1" src="../static/image/[email protected]" alt="" />
</div>

.wrap {
    font-size: 0;
    width: 100vw;
    height: 100vh;
}

.box1, .box2 {
    display: inline-block;
}

.box1 {
    width: 53.333333333333336vw; // vw 100vw = 375 1vw=3.75px
    height: 14.992503748125937vh;   // vh 100vh = 667 1h=6.67px
    background-color: yellow;
}

.box2 {
    width: 46.666666666666664vw;
    height: 14.992503748125937vh;   
    background-color: blue;
}

<div class="wrap">
    <div class="box1"></div>
    <div class="box2"></div>
</div>