本文主要介绍如何在reactmobile项目中使用antd-mobile2及其配置。使用create-react-app脚手架生成的项目,然后运行npmruneject弹出配置项。此命令不可逆。1、使用rem作为计算依据,所以需要在index.html中粘贴如下代码,淘宝的灵活方案没有使用(function(doc,win){vardocEl=doc.documentElement,resizeEvt='orientationchange'在窗口中?'orientationchange':'resize',recalc=function(){varclientWidth=docEl.clientWidth;if(!clientWidth)return;docEl.style.fontSize=100*(clientWidth/750)+'px';};if(!doc.addEventListener)return;win.addEventListener(resizeEvt,recalc,false);doc.addEventListener('DOMContentLoaded',recalc,false);})(文档,窗口);使用的设计图是750!2、配置antd-mobile的按需加载2-1.当然,你需要先npmiantd-mobile--save。2-2。配置按需加载package.json3,配置webpack3-1。首先npmipostcss-px2rem-exclude--save-dev3-2.config/webpack.config.dev.js和webpack.config.prod.js首先引入constpx2rem=require('postcss-px2rem-exclude');然后配置它。webpack.config.dev.js和webpack.config.prod.js都需要这样配置!4、直接引用需要的元器件即可。5.关于css单元题750设计图,ps上量出的尺寸是多少px,把尺寸写在scss文件里就可以了
