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

最新推荐文章于 2021-07-26 22:54:47 发布

weixin_34365635

最新推荐文章于 2021-07-26 22:54:47 发布

阅读量206

点赞数

文章标签： webpack ViewUI

原文链接：https://segmentfault.com/a/1190000007394496

版权

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

weixin_34365635

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ant design mobile 0.9.x 高清方案 webpack 配置

1. 在你的模板文件中 html > head<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <title>ant design mobile 0.9.x HD solu...
复制链接

扫一扫

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

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

2. 引入高清方案脚本：

3. 安装依赖 postcss-pxtorem

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

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

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

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

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