vant+postcss-px-to-viewport 记一次移动端网页适配之旅
本次的需求其实很简单，即为公司制作一个可以在微信公众号上使用的网页，但是由于自己对移动端组件以及很多东西不熟悉，踩了很多坑。一开始直接动手写乃至用element，完全达不到合格的美观程度，缩放element-ui元素很困难（在被科普了vant这样的移动端ui之后才知道这是一种愚蠢的行为），于是终于操起vant
vant很好用，但是把vant组件直接放在页面上遇到一个直接问题：太小了，同样尝试了一下缩放组件，但是这个操作工程量大且不一定美观，于是研究了一番发现：vant是按照375px的设计稿写的，其css大多单位是px，这能直接用就怪了，咨询了一波公司的前辈，得知他是把vant css中的px替换为rem来操作的，于是我打开css直接CTRL+F px转rem，当然两者有16倍关系我还是懂的，于是采取了根元素
我屏幕宽为1080px，将元素长度宽度除16再乘（1080/375）可让vant元素刚好填满我的屏幕，当然对于别的屏宽就暂时顾不了了，但是毕竟可用@media and screen来解决吗。
实践结果是，vantage元素合适地填满了我的chrome，填满了我的手机屏，却在微信处翻了车，一个复选框的边框厚得像门一样，此处图和原因再补。
发现这种方法没办法达成对微信的适配后，我转向了插件，起初使用的是postcss-pxtorem，其自动将css中的px转为rem，但这种方法还要搭配 lib-flexible 食用，而该库的作者这样告诉我们：有了viewport适配，我们已经退出历史舞台了。毕竟用一个库总比用两个方便，而且人家库作者都这么说了，便安装postcss-px-to-viewport，中间踏了点webpack的坑，但是postcss-px-to-viewport正常工作后效果拔群，一步完成适配，也不用去想@media and screen了。
关于px转rem与viewport，具体方案见 https://sunniejs.github.io/vue-h5-template/#/zh-cn/rem
绛旓細vant寰堝ソ鐢紝浣嗘槸鎶妚ant缁勪欢鐩存帴鏀惧湪椤甸潰涓婇亣鍒颁竴涓洿鎺ラ棶棰橈細澶皬浜嗭紝鍚屾牱灏濊瘯浜嗕竴涓嬬缉鏀剧粍浠讹紝浣嗘槸杩欎釜鎿嶄綔宸ョ▼閲忓ぇ涓斾笉涓瀹氱編瑙傦紝浜庢槸鐮旂┒浜嗕竴鐣彂鐜帮細vant鏄寜鐓375px鐨勮璁＄鍐欑殑锛屽叾css澶у鍗曚綅鏄痯x锛岃繖鑳界洿鎺ョ敤灏辨簡锛屽挩璇簡涓娉㈠叕鍙哥殑鍓嶈緢锛屽緱鐭ヤ粬鏄妸vant css涓殑px鏇挎崲涓簉em鏉ユ搷浣滅殑锛屼簬鏄...
绛旓細鏂规硶涓锛歳em鍗曚綅 浣跨敤amfe-flexible鍜postcss-pxtorem 锛堝啓鐨勬椂鍊欓渶瑕佽浆鎹㈠崟浣嶏級vant鏈韩鏄px鍗曚綅鐨勶紝瀹為檯椤圭洰璁捐鍥炬槸750px瀹斤紝鑻ヨ瀹炵幇鍚屾椂鑷傚簲锛岄渶瑕佺粨鍚堜袱涓彃浠讹細amfe-flexible鍜宲ostcss-pxtorem 姝ラ濡備笅 涓銆佸浣曞皢px鍗曚綅杞寲涓簉em锛熷熷姪 postcss-pxtorem 鎻掍欢锛宲ostcss-pxtorem 鏄竴娆 postcss 鎻...
绛旓細鎵嬫満绔〉闈㈠紑鍙戯紝浣跨敤vue锛孶I妗嗘灦鐢vant锛岃璁＄鏄750px锛屽崟浣嶇敤rem vant鏄寜鐓375px璁捐绋垮紑鍙戯紝涓哄崟浣嶇殑锛屽鏋滈厤缃牴瀛椾綋澶у皬涓37.5锛岃璁＄灏辨棤娉曡繕鍘燂紝閰嶇疆75锛寁ant缁勪欢灏卞彉灏忎簡銆傚緢鏄嫤鎭硷紝缁忚繃涓鐣悳绱紝鎸夌収濡備笅閰嶇疆.postcssrc.js鏂囦欢锛屽氨鍙互瀹岀編瑙ｅ喅闂 module.exports = ({...
绛旓細鍓嶇椤甸潰涓昏浣跨敤vant+postcss-pxtorem+lib-flexible,鍚庣绠＄悊椤甸潰涓昏鏄娇鐢╡lementUI杩涜寮鍙戙傚嚭鐜伴棶棰 postcss-pxtorem杞寲鎶px杞寲rem鎴栬卾m鐨勬椂鍊欎細褰卞搷elementui鐨勭浉鍏虫牱寮忥紝鎵浠ュ湪鍚庣绠＄悊椤甸潰鐨勭紪鐮佷腑浼氬嚭鐜扮洿鎺ヤ粠elementui绮樿创杩囨潵鐨勭増寮忛棶棰橈紝涓嬮潰鏄垜鐨刾ostcss.conifg.js鏂囦欢鐨勭浉鍏抽厤缃 module.exports ...
