项目初始化：移动端项目和pc端（适配）

屏幕尺寸
转载链接：https://blog.csdn.net/DFF1993/article/details/79242831

超小屏幕（手机）	小屏幕（平板）	中等屏幕（桌面）	大屏幕（桌面）
<768px	>=768	>=992	>=1200
.col-xs-	.col-sm-	.col-md-	.col-lg-

// 原理都是：（通过 *（视口的宽度/设计稿宽度）份数 来动态计算出html的fontSize）

很少因为高度产生的适配问题(rem适配iphoneX是个例外)
iphoneX相比iphone6/7/8 宽度一样只是增加了高度

方案一：

function setHtmlFontSize() {
  const baseSize = 100 // 由于浏览器字体最小为12px，故这个值要设置大一点，保证计算所得的html字体大于12px
  const baseWidth = 375 // 设计稿的宽度
  const htmlWidth =
    document.documentElement.clientWidth || document.body.clientWidth
  const htmlDom = document.getElementsByTagName('html')[0]
  htmlDom.style.fontSize = (htmlWidth / baseWidth) * baseSize + 'px'
}
setHtmlFontSize()
window.onresize = setHtmlFontSize // 动态设置html的font-size，样式单位使用rem，用于响应式开发（可通过调整baseSize和baseWidth去计算设计尺寸和rem的转换关系）

// window.onresize是保证PC端也能适配窗口的变化
方案二：

function autoRootFontSize() {
  document.documentElement.style.fontSize =
    (Math.min(
      screen.width,
      document.documentElement.getBoundingClientRect().width
    ) /
      375) *
      100 +
    'px'
  // 取screen.width和document.documentElement.getBoundingClientRect().width的最小值；除以750，乘以32；懂的起撒，就是原本是750大小的32px;如果屏幕大小变成了375px,那么字体就是16px;也就是根字体fontSize大小和屏幕大小成正比变化！是不是很简单
}
window.addEventListener('resize', autoRootFontSize)
autoRootFontSize()

—插件
px2rem

px2rem插件的配置项Root Font Size的值和代码中的baseSize值 是改的

个人些许年的开发的经验： 1）建议设计稿的的尺寸小数位四舍五入，如4.56px取 4px
2) 关于font-weight: 400是正常， 700是加粗。其实pc端只支持这两种值。如果碰到设计稿上显示font-weight: 500; 建议还是原样写上。手机上会支持的 3）rem往往和媒体查询结合使用，因为PC端浏览器字体最小就12px不可能无限制跟随小下去

// 无论哪一种写法，本质都是一样的
iphoneX相比iphone6/7/8只是屏幕高度不一样，不影响

示例
针对多端适配（手机，平板，pc）

 var baseWidth = 375
        function setHtmlFontSize() {
            // alert(baseWidth)
            const baseSize = 100 // 由于浏览器字体最小为12px，故这个值要设置大一点，保证计算所得的html字体大于12px
            // const baseWidth = baseWidth || 375 // 设计稿的宽度
            const htmlWidth =
                document.documentElement.clientWidth || document.body.clientWidth
            // alert(htmlWidth)
            const htmlDom = document.getElementsByTagName('html')[0]
            htmlDom.style.fontSize = (htmlWidth / baseWidth) * baseSize + 'px'
            console.log(document.body.clientWidth)
            console.log(htmlDom.style.fontSize)
        }

        console.log(navigator.userAgent);
        var os = function () {
            var ua = navigator.userAgent,
                isWindowsPhone = /(?:Windows Phone)/.test(ua),
                isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
                isAndroid = /(?:Android)/.test(ua),
                isFireFox = /(?:Firefox)/.test(ua),
                isChrome = /(?:Chrome|CriOS)/.test(ua),
                isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
                isPhone = /(?:iPhone)/.test(ua) && !isTablet,
                isPc = !isPhone && !isAndroid && !isSymbian;
            return {
                isTablet: isTablet,
                isPhone: isPhone,
                isAndroid: isAndroid,
                isPc: isPc
            };
        }();

        function createStyleSJ() {
            return `
            .news-home ul li dl dt img {
                width: 3.3543rem;
                height: 2.7444rem;
            }
            .er-list ul li dt img {
                width: 1.5321rem;
                height: 1.5321rem;
            }
            `
        }
        function createStylePB() {
            // 平板下采用了固定高度，宽度自适应
            return `
            .news-home ul li dl dt img {
                height: 277px;
            }
            .er-list ul li dt img {
                height: 339px; 
            }
            `
        }
        function createStyleDN() {
            return `
            .news-home ul li dl dt img {
                height: 359.97px;
            }
            .er-list ul li dt img {
                height: 320px; 
            }
            `
        }
        function addStyle(fn) {
            var style = document.createElement("style");
            style.type = "text/css";
            style.innerHTML = fn();
            window.document.head.appendChild(style);
        }
        if (os.isAndroid || os.isPhone) {
            // alert("手机")
            addStyle(createStyleSJ)
            baseWidth = 375
        } else if (os.isTablet) {
            // alert("平板") // ipad做参考
            addStyle(createStylePB)
            // baseWidth = 768
        } else if (os.isPc) {
            addStyle(createStyleDN)
            // alert("电脑") // 以994作为参考
        }
        setHtmlFontSize()
        window.onresize = setHtmlFontSize