vant

一、表單驗(yàn)證問題

? ? 插件VeeValidate參考：

? ? ? ? 代碼測(cè)試：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 圖片：

? ? ? ? 根據(jù)js獲取獲取設(shè)備像素比去require不同的圖片闪湾。

/** * 獲取設(shè)備像素比 */
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動(dòng)態(tài)引入：

? ? ? ? ？绩卤？途样？

三江醇、分辨率問題-css

? ? 3.1 圖片：

? ? ? ? 通過mixin.less里@media來實(shí)現(xiàn)不同分辨率圖片的調(diào)用

? ? ? ? /*
? ? ? ? *功能：不同視口調(diào)用不同的背景圖片
? ? ? ? *使用例如：? .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解決移動(dòng)端適配的問題(安裝到生產(chǎn)環(huán)境)

? ? ? ? ? ? url:https://blog.csdn.net/yanzhi_2016/article/details/80461951

? ? ? ? ? ? 同時(shí)會(huì)自動(dòng)設(shè)置html的font-size為屏幕寬度除以10陶夜，也就是1rem等于html根節(jié)點(diǎn)的font-size。

? ? ? ? ? ? 假如設(shè)計(jì)稿的寬度是750px裆站，此時(shí)1rem應(yīng)該等于75px条辟。假如量的某個(gè)元素的寬度是150px，那么在css里面定義這個(gè)元素的寬度就是 width: 2rem宏胯。

? ? ? ? ? ? 假如設(shè)計(jì)稿的寬度是375px羽嫡，此時(shí)1rem應(yīng)該等于37.5px。假如量的某個(gè)元素的寬度是150px肩袍，那么在css里面定義這個(gè)元素的寬度就是 width: 4rem

? ? ? ? ? ? 其實(shí)這些無需自己計(jì)算杭棵，按照設(shè)計(jì)稿標(biāo)注的px寫，實(shí)時(shí)編譯時(shí)會(huì)自動(dòng)轉(zhuǎn)成rem了牛。? ? ? ? ?

? ? ? ? ? ? 注意：

? ? ? ? ? ? ? ? 1.檢查一下html文件的head中颜屠，如果有 meta name="viewport"標(biāo)簽辰妙，需要將他注釋掉鹰祸，因?yàn)槿绻羞@個(gè)標(biāo)簽的話，lib-flexible就會(huì)默認(rèn)使用這個(gè)標(biāo)簽密浑。而我們要使用lib-flexible自己生成的 meta name="viewport"來達(dá)到高清適配的效果蛙婴。

? ? ? ? ? ? ? ? 2.因?yàn)閔tml的font-size是根據(jù)屏幕寬度除以10計(jì)算出來的，所以我們需要設(shè)置頁(yè)面的最大寬度是10rem尔破。

? ? ? ? ? ? ? ? 3.此方法只能將.vue文件style標(biāo)簽中的px轉(zhuǎn)成rem街图，不能將script標(biāo)簽和元素style里面定義的px轉(zhuǎn)成rem

? ? ? ? ? ? ? ? 4.如果在.vue文件style中的某一行代碼不希望被轉(zhuǎn)成rem，只要在后面寫上注釋 /* no*/就可以了懒构。如果個(gè)別地方不想轉(zhuǎn)化px餐济。可以簡(jiǎn)單的使用大寫的 PX 或 Px 胆剧。

四絮姆、vant主題定制

? ? 變量定制：https://github.com/youzan/vant/blob/dev/src/style/var.less

五、js動(dòng)態(tài)設(shè)置html字體

? ? 在沒有使用vant的px轉(zhuǎn)rem之前需要手動(dòng)計(jì)算后是設(shè)置html字體大小秩霍，現(xiàn)在好了篙悯，有了vant的這個(gè)功能，無需再做下列操作了铃绒，記錄一下歷史鸽照！

? ? /*

? ? *重設(shè)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";