ant design mobile 0.9.x 高清方案 webpack 配置

2024年5月2日 241次阅读 来源: 电波马达

1. 在你的模板文件中 html > head

<!DOCTYPE html>
<html lang="en">
   <head>
   <meta charset="utf-8" />
   <title>ant design mobile 0.9.x HD solution webpackconfig</title>
   <script>/* 高清方案脚本 */</script>
   </head>
   <body></body>
</html>

2. 引入高清方案脚本：

<script>(function(baseFontSize,fontscale){var _baseFontSize=baseFontSize||100;var _fontscale=fontscale||1;var win=window;var doc=win.document;var ua=navigator.userAgent;var matches=ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);var UCversion=ua.match(/U3\/((\d+|\.){5,})/i);var isUCHd=UCversion&&parseInt(UCversion[1].split('.').join(''),10)>=80;var isIos=navigator.appVersion.match(/(iphone|ipad|ipod)/gi);var dpr=win.devicePixelRatio||1;if(!isIos&&!(matches&&matches[1]>534)&&!isUCHd){dpr=1}var scale=1/dpr;var metaEl=doc.querySelector('meta[name="viewport"]');if(!metaEl){metaEl=doc.createElement('meta');metaEl.setAttribute('name','viewport');doc.head.appendChild(metaEl)}metaEl.setAttribute('content','width=device-width,user-scalable=no,initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale);doc.documentElement.style.fontSize=_baseFontSize/2*dpr*_fontscale+'px';window.viewportScale=dpr})();if(!window.Promise){document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>')}</script>

3. 安装依赖 postcss-pxtorem

npm install -D postcss-loader postcss-pxtorem

4. 在 webpack.config.js 添加配置

const pxtorem = require('postcss-pxtorem');
postcss: [
    pxtorem({
        rootValue: 100,
        propWhiteList: [],
    })
]

5. 在原来处理全局 css 的 loader 加上 !postcss：

{
    test: /\.css$/,
    loader: 'style!css!postcss'
}

原文：antd-mobile

    原文作者：电波马达
    原文地址: https://segmentfault.com/a/1190000007394496
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞