移动端适配方案思路(1) em 相对父级元素设置的 font-size 来设置大小如果父元素没有设置 font-siz

(1) em 相对父级元素设置的 font-size 来设置大小如果父元素没有设置 font-size ，则继续向上查

找，直至有设置 font-size 元素

(2) rem 直接参照 html 标签字体大小，并且所有使用 rem 单位的都是参照 html 标签网易实例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script type="text/javascript">
        (function(win,lib){
            var doc=win.document;
            var docEl=doc.documentElement;
            var metaEl=doc.querySelector('meta[name="viewport"]');
            if (metaEl) {
                console.log(metaEl.getAttribute("content"))
                var match=metaEl.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
                console.log(match[1])
            } else {
                console.log('bbb')
            }
        })(window,window["lib"]  || (window["lib"]={}));
    </script>
</head>

<body>
    <div>
        <h1>移动端适配方案思路</h1>
    </div>
</body>

<html>

1、得到屏幕的宽

var w_win=document.documentElement/clientWidth || document.body.clientWidth;

2、得到html元素

var _html=document.getElementsByTagName('html');

3、设置根元素的字体大小

_html.style.fontSize=w_win/20+'px';

完整代码：

<html style="font-size: 16px;">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
h1{
    font-size: 2rem;font-weight: normal;
}
.img_w{
    width: 5rem;display: block;
}
</style>
<script type="text/javascript">
    // 得到屏幕的宽
    var w_win=document.documentElement/clientWidth || document.body.clientWidth;
    // 得到html元素
    var _html=document.getElementsByTagName('html');
    // console.log(_html[0])
    // 设置根元素的字体大小
    _html.style.fontSize=w_win/20+'px';
</script>
</html>

<div>
<h1>适合方案思路</h1>
<img src="./img/js.jpg" class="img_w">
</div>