vant

一、表单验证问题

    插件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";

        }

    }