vue_App开发,如何做适配

vue_4.0版本 手机端开发：如何做适配

前端现在的主流适配方案：rem【推荐】,vw,vh,flex布局,百分比，媒体查询

rem的适配方案

一、lib-flexible：

[lexible 的链接] (https://github.com/amfe/lib-flexible)

找到github官网然后使用zpi进行解压 只要index.js 和index.min.js|引入你要的vue组件中去

amfe-flexible
Classic edition (0.3.2)

由于viewport单位得到众多浏览器的兼容，lib-flexible这个过渡方案已经可以放弃使用，
不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用viewport
来替代此方。

Usage

Install

	npm i -S amfe-flexible

Import

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script src="./node_modules/amfe-flexible/index.js"></script>

二、rem

	(function (doc, win) {
    //获取html的标签
    var docEl = doc.documentElement,
    //检测一下屏幕的方向
        resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / 375) + "px";
        };
    if (!doc.addEventListener) return;

    //监听横竖的屏幕变化resize  
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);