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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。