• 移动端 rem 适配


    插件: postcss-pxtorem

    配置:

    vue.config.js : 
    postcss: [ require(
    'postcss-pxtorem')({ rootValue: 20, unitPrecision: 5, // selectorBlackList:['.inline-calendar'], propWhiteList: [], replace: true, mediaQuery: false, minPixelValue: 0 }), require('autoprefixer') ]

    js适配:

    (function (doc, win) {
            var docEl = doc.documentElement,
              resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
              recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                var ua = navigator.userAgent
                if (!/(iPhone|iPad|iPod|iOS)/i.test(ua) && !/(Android)/i.test(ua) ) {
                  docEl.style.fontSize = 15 + 'px';
                } else {
                  docEl.style.fontSize = 20 * (clientWidth / 750) + 'px';
                }
              };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
          })(document, window)
  • 相关阅读:
    js和css
    主题
    php.ini
    css 选择器、元素默认宽度、media screen
    linux 重要笔记
    cookie和session、
    tp5 报 A non well formed numeric value encountered 的错解决办法
    pdo
    二叉树
    顺序串
  • 原文地址:https://www.cnblogs.com/tutao1995/p/13535911.html
Copyright © 2020-2023  润新知