国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

如何在vue中實現px自動轉換成rem,實現多手機的尺寸適配問題?

xiaoxiaozi / 2288人閱讀

摘要:安裝插件在終端執行在中配置使用適配倍屏,倍屏的封裝的將根據已有的標簽來設置縮放比例下,對于和的屏,用倍的方案,其余的用倍方案其他設備下,仍舊使用倍的方案在入口文件中引入在中就可以愉快的編寫啦,使用,下面上傳

1.安裝插件postcss-px2rem
在終端執行:npm install postcss-px2rem --save
2.在build/vue-loader.conf.js 中配置使用postcss-px2rem

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: isProduction
      ? config.build.productionSourceMap
      : config.dev.cssSourceMap,
    extract: isProduction
  }),
  postcss: [
    require("autoprefixer")({browsers: ["iOS >= 7", "Android >= 4.1"]}),
    require("postcss-px2rem")({remUnit: 75, "baseDpr":2})

  ],
  transformToRequire: {
    video: "src",
    source: "src",
    img: "src",
    image: "xlink:href"
  }
}

3.適配2倍屏,3倍屏的封裝的flex.js

;
(function(win, lib) {
    var doc = win.document;
    var docEl = doc.documentElement;
    var metaEl = doc.querySelector("meta[name="viewport"]");
    var flexibleEl = doc.querySelector("meta[name="flexible"]");
    var dpr = 0;
    var scale = 0;
    var tid;
    var flexible = lib.flexible || (lib.flexible = {});

    if (metaEl) {
        //console.warn("將根據已有的meta標簽來設置縮放比例");
        var match = metaEl.getAttribute("content").match(/initial-scale=([d.]+)/);
        if (match) {
            scale = parseFloat(match[1]);
            dpr = parseInt(1 / scale);
        }
        var content = flexibleEl.getAttribute("content");
        if (content) {
            var initialDpr = content.match(/initial-dpr=([d.]+)/);
            var maximumDpr = content.match(/maximum-dpr=([d.]+)/);
            if (initialDpr) {
                dpr = parseFloat(initialDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));
            }
            if (maximumDpr) {
                dpr = parseFloat(maximumDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));
            }
        }
    }

    if (!dpr && !scale) {
        var isAndroid = win.navigator.appVersion.match(/android/gi);
        var isIPhone = win.navigator.appVersion.match(/iphone/gi);
        var devicePixelRatio = win.devicePixelRatio;
        if (isIPhone) {
            // iOS下,對于2和3的屏,用2倍的方案,其余的用1倍方案
            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                dpr = 3;
            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
                dpr = 2;
            } else {
                dpr = 1;
            }
        } else {
            // 其他設備下,仍舊使用1倍的方案
            dpr = 1;
        }
        scale = 1 / dpr;
    }

    docEl.setAttribute("data-dpr", dpr);
    if (!metaEl) {
        metaEl = doc.createElement("meta");
        metaEl.setAttribute("name", "viewport");
        metaEl.setAttribute("content", "initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no");
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(metaEl);
        } else {
            var wrap = doc.createElement("div");
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);
        }
    }

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 540 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + "px";
        flexible.rem = win.rem = rem;
    }

    win.addEventListener("resize", function() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener("pageshow", function(e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    if (doc.readyState === "complete") {
        doc.body.style.fontSize = 12 * dpr + "px";
    } else {
        doc.addEventListener("DOMContentLoaded", function(e) {
            doc.body.style.fontSize = 12 * dpr + "px";
        }, false);
    }


    refreshRem();

    flexible.dpr = win.dpr = dpr;
    flexible.refreshRem = refreshRem;
    flexible.rem2px = function(d) {
        var val = parseFloat(d) * this.rem;
        if (typeof d === "string" && d.match(/rem$/)) {
            val += "px";
        }
        return val;
    }
    flexible.px2rem = function(d) {
        var val = parseFloat(d) / this.rem;
        if (typeof d === "string" && d.match(/px$/)) {
            val += "rem";
        }
        return val;
    }

})(window, window["lib"] || (window["lib"] = {}));

4.在入口文件main.js中引入flex.js

import "@/assets/js/flex.js";
import Vue from "vue";

import App from "./App";

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: "#app",
  render: h => h(App)
})

5.在css 中就可以愉快的編寫css啦,使用px ,下面上傳使用代碼;

#app {
  width: 200px;
  height: 400px;
  background: red;
}

職場小白south Joe,望各位大神批評指正,祝大家學習愉快!

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/102442.html

相關文章

  • vuevue-cli構建使用 px2rem-loader ,全局自動轉換px單位,完美解決引入第三

    摘要:使用的小伙伴兒會用到淘寶的開源的適配方案去輕松的完成適配,這也是我最喜歡的,但是使用這個方案時,你引入第三方庫時樣式會變小。。這個坑難的我不行,各種百度,各種想法,差一點就放棄了這個方案。 最近公司的的項目趕,作為前端的小白懶出新的高度,使出專業的技能 --復制粘貼!!(改別人的代碼也是煎熬)我經常做一些H5頁面,這樣就會遇到適配這個頭疼的問題,我分享下我用經常用到的適配方案: 這里...

    CodeSheep 評論0 收藏0
  • vuevue-cli構建使用 px2rem-loader ,全局自動轉換px單位,完美解決引入第三

    摘要:使用的小伙伴兒會用到淘寶的開源的適配方案去輕松的完成適配,這也是我最喜歡的,但是使用這個方案時,你引入第三方庫時樣式會變小。。這個坑難的我不行,各種百度,各種想法,差一點就放棄了這個方案。 最近公司的的項目趕,作為前端的小白懶出新的高度,使出專業的技能 --復制粘貼!!(改別人的代碼也是煎熬)我經常做一些H5頁面,這樣就會遇到適配這個頭疼的問題,我分享下我用經常用到的適配方案: 這里...

    monw3c 評論0 收藏0
  • vuevue-cli構建使用 px2rem-loader ,全局自動轉換px單位,完美解決引入第三

    摘要:使用的小伙伴兒會用到淘寶的開源的適配方案去輕松的完成適配,這也是我最喜歡的,但是使用這個方案時,你引入第三方庫時樣式會變小。。這個坑難的我不行,各種百度,各種想法,差一點就放棄了這個方案。 最近公司的的項目趕,作為前端的小白懶出新的高度,使出專業的技能 --復制粘貼!!(改別人的代碼也是煎熬)我經常做一些H5頁面,這樣就會遇到適配這個頭疼的問題,我分享下我用經常用到的適配方案: 這里...

    loostudy 評論0 收藏0
  • rem, vw, 還是...? 各憑本事移動端適配方案

    摘要:另一種就是不縮放,對等問題單獨引入處理方案。彩蛋部分相信大多數同學也是有想法在實際開發中把融入到現有的移動端適配方案中的。 前言 2018年最后的法定假期都已經結束了,我相信大部分正在進行或曾經進行過移動端頁面開發的同學都或多或少的了解過使用rem進行移動端頁面適配的方案以及使用vw的方案,(沒了解過的同學可以參見大漠老師的這兩篇文章 使用Flexible實現手淘H5頁面的終端適配和再...

    wangbinke 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<