移动端适配方案

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

最简单的移动端适配方案(rem+vw)
https://blog.noob6.com/2018/06/03/the-simplest-way-to-adapted-to-mobile-in-css-with-vw+rem/

1vw等于屏幕宽度的1% 1vh等于屏幕高度的1%
通常设计稿为750宽度，屏幕总宽度为100vw
那么：
100vw = 750px * 1px
1px = 100 / 750
1px就等于0.13333333vw

把单位放大100倍便于计算

html {
    font-size: 13.333333vw;
}

设计稿像素单位转换为rem单位就是：
设计稿单位/100，直接将px单位向左移2位就可以

又因为单位是以屏幕宽度为基准计算，当设备宽度过大时，计算出的rem值的显示也越大，加上下面样式限定

@media (min-width: 560px) {
    html {
        font-size: 54px;
    }
}

 

 

计算公式：1rem = 屏幕宽度/UI设计图宽度*100px

我们计算出iphone6屏幕宽度375：
设计稿375px情况下 1rem=100px
设计稿480px情况下 1rem=78.125px
设计稿600px情况下 1rem=62.5px
设计稿750px情况下 1rem=50px

按iphone6屏幕尺寸，设计稿750px还原，让页面能够在其他尺寸下尽量显示正常

css尺寸计算方式为：设计稿中元素尺寸/100rem

参考：

【移动端适配方案一 弹性布局】@media标签+rem+viewport实现移动端屏幕适配

移动前端开发之viewport的深入理解

@charset "UTF-8";
/*
1、写入CSS的尺寸/屏幕宽度 = UI图标注的尺寸/UI图宽度
即：写入CSS的尺寸 = (UI图标注的尺寸*屏幕宽度)/UI图宽度
2、我们将根元素设置为100px，则1rem=100px
然而为了不失真要计算出对应的比例，于是1rem = 屏幕宽度/UI设计图宽度*100px
即：屏幕640px，给的设计稿宽640px，那么这种情况下1rem就表示100px
如果屏幕320px，给的设计稿宽640px，那么这种情况下1rem就表示50px
要想做成响应式，只需要配合@media计算好对应屏幕下html font-size的值。
当然为了好计算，我们全部以100px为基准
3、于是：写入CSS的尺寸 = UI图标注的尺寸/100px*1rem
*/
@media (min-width: 240px) {
    html {
        font-size: 32px;
    }
}
@media (min-width: 320px) {
    html {
        font-size: 42.66667px;
    }
}
@media (min-width: 360px) {
    html {
        font-size: 48px;
    }
}
@media (min-width: 375px) {
    html {
        font-size: 50px;
    }
}
@media (min-width: 384px) {
    html {
        font-size: 51.2px;
    }
}
@media (min-width: 411px) {
    html {
        font-size: 54.8px;
    }
}
@media (min-width: 414px) {
    html {
        font-size: 55.2px;
    }
}
@media (min-width: 424px) {
    html {
        font-size: 56.53333px;
    }
}
@media (min-width: 480px) {
    html {
        font-size: 64px;
    }
}
@media (min-width: 540px) {
    html {
        font-size: 72px;
    }
}
@media (min-width: 640px) {
    html {
        font-size: 85.33333px;
    }
}
@media (min-width: 720px) {
    html {
        font-size: 96px;
    }
}
@media (min-width: 750px) {
    html {
        font-size: 100px;
    }
}
@media (min-width: 768px) {
    html {
        font-size: 102.4px;
    }
}
@media (min-width: 800px) {
    html {
        font-size: 106.66667px;
    }
}
@media (min-width: 980px) {
    html {
        font-size: 130.66667px;
    }
}
@media (min-width: 1024px) {
    html {
        font-size: 136.53333px;
    }
}
@media (min-width: 1080px) {
    html {
        font-size: 144px;
    }
}
@media (min-width: 1152px) {
    html {
        font-size: 153.6px;
    }
}
@media (min-width: 1366px) {
    html {
        font-size: 182.13333px;
    }
}
@media (min-width: 1440px) {
    html {
        font-size: 192px;
    }
}
@media (min-width: 2160px) {
    html {
        font-size: 288px;
    }
}

用户设置浏览器字体大小导致布局错误的问题

IOS是通过给 body 设置 -webkit-text-size-adjust 属性实现的；可以通过以下代码验证：
 

var body = document.body;
alert(body.getAttribute('style'));

那么针对IOS的解决方案就是

body {
    -webkit-text-size-adjust: 100% !important;
}

安卓的字体放大原理是在CSS解析之后，渲染之前，将所有的字体大小的值进行缩放，后面的排版和渲染都会直接使用缩放后的CSS值。
解决方案如下：

(function(){
    var $dom = document.createElement('div');
    $dom.style = 'font-size:12px;';
    document.body.appendChild($dom);
    // 计算出放大后的字体
    var scaledFontSize = parseInt(window.getComputedStyle($dom, null).getPropertyValue('font-size'));
    document.body.removeChild($dom);
    // 计算原字体和放大后字体的比例
    var scaleFactor = 12 / scaledFontSize;

    // 取html元素的字体大小
    // 注意，这个大小也经过缩放了
    // 所以下方计算的时候 *scaledFontSize是原来的html字体大小
    // 再次 *scaledFontSize才是我们要设置的大小
    var originRootFontSize = parseInt(window.getComputedStyle(document.documentElement, null).getPropertyValue('font-size'));
    document.documentElement.style.fontSize = originRootFontSize * scaleFactor * scaleFactor + 'px';
})();

参考：

移动端用户设置字体放大导致的问题