一、表单验证问题
插件VeeValidate参考：
代码测试：https://codesandbox.io/s/y3504yr0l1?initialpath=%2F%23%2Fform&module=%2Fsrc%2Fcomponents%2FForm.vue
文档：https://baianat.github.io/vee-validate/guide/rules.html#decimal
二、分辨率问题-js
2.1 图片：
根据js获取获取设备像素比去require不同的图片。
/** * 获取设备像素比 */
getDevicePixelRatio: function () {
let ratio = 1;
if (window.screen.systemXDPI !== undefined && window.screen.logicalXDPI !== undefined && window.screen.systemXDPI > window.screen.logicalXDPI)
{
ratio = window.screen.systemXDPI / window.screen.logicalXDPI;
} else if (window.devicePixelRatio !== undefined) {
ratio = window.devicePixelRatio;
}
return ratio;
}
2.2 import动态引入：
？？？
三、分辨率问题-css
3.1 图片：
通过mixin.less里@media来实现不同分辨率图片的调用
/*
*功能：不同视口调用不同的背景图片
*使用例如： .bg-img('../../assets/img/page-bg','png');
*/
.bg-img(@url,@imgtype) {
background-image: url("@{url}.@{imgtype}");
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
background-image: url("@{url}@2x.@{imgtype}");
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
background-image: url("@{url}@3x.@{imgtype}");
}
}
3.2 字体、元素宽高；
lib-flexible解决移动端适配的问题(安装到生产环境)
url:https://blog.csdn.net/yanzhi_2016/article/details/80461951
同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。
假如设计稿的宽度是750px，此时1rem应该等于75px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem。
假如设计稿的宽度是375px，此时1rem应该等于37.5px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 4rem
其实这些无需自己计算，按照设计稿标注的px写，实时编译时会自动转成rem。
注意：
1.检查一下html文件的head中，如果有 meta name="viewport"标签，需要将他注释掉，因为如果有这个标签的话，lib-flexible就会默认使用这个标签。而我们要使用lib-flexible自己生成的 meta name="viewport"来达到高清适配的效果。
2.因为html的font-size是根据屏幕宽度除以10计算出来的，所以我们需要设置页面的最大宽度是10rem。
3.此方法只能将.vue文件style标签中的px转成rem，不能将script标签和元素style里面定义的px转成rem
4.如果在.vue文件style中的某一行代码不希望被转成rem，只要在后面写上注释 /* no*/就可以了。如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px 。
四、vant主题定制
变量定制：https://github.com/youzan/vant/blob/dev/src/style/var.less
五、js动态设置html字体
在没有使用vant的px转rem之前需要手动计算后是设置html字体大小，现在好了，有了vant的这个功能，无需再做下列操作了，记录一下历史！
/*
*重设html字体大小（目前没用，有postcss-pxtorem和lib-flexible方案替代）
*/
resetHtmlFontSize: function () {
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var width = w > h ? h : w;
width = width > 720 ? 720 : width
var fz = ~~(width * 100000 / 36) / 10000;
document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz + "px";
var realfz = ~~(+window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize.replace('px', '') * 10000) / 10000;
if (fz !== realfz) {
document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz * (fz / realfz) + "px";
}
}
