vue-屏幕适配方案

一,PC端适配

开发PC端项目,通常会要求适应各种的屏幕尺寸,并且要求浏览器缩小页面等比例变化,因此就要求写出来的前端页面是能够自适应的

利用webpack配置px2rem-loader和lib-flexible来实现px转化rem
1、安装
npm install px2rem-loader -D
npm install lib-flexible -S

2、在项目入口文件 main.js 里 引入 lib-flexible

import 'lib-flexible'

3、webpack配置

在项目build文件夹下的util.js中添加

并放进generateLoaders函数的 loaders 数组中

// 增加代码,px转rem配置(需要将px2remloader添加进loaders数组中)
const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 192  //根据视觉稿,rem为px的十分之一,1920px  192 rem
      // remPrecision: 8//换算的rem保留几位小数点
    }
  }
  function generateLoaders(loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
}

4、修改flexible.js(重要,不然没效果)

因为该适配方案主要用于移动端,从flexible.js代码中也可以看到

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

此时,放大缩小浏览器窗口发现里面的内容也按比例缩放了

注意:

以上实现转换适用于:

(1)组件中编写的<style></style>下的css

(2)从index.js或者main.js中import ‘../../static/css/reset.css’引入css

(3)在组件的<script type=”text/ecmascript-6″> import ‘../../static/css/reset.css'</script>中引入css

另外的情况不适用:

(1)组件<style></style>中@import “../../static/css/reset.css (可考虑上面(2)、(3)的形式引入)

(2)外部样式:<link rel=”stylesheet” href=”static/css/reset.css”>

(3)元素内部样式:style=”height: 417px; width: 550px;

二,移动端适配

1,px2rem-loader和lib-flexible

参考PC端适配1,2,3步骤,不需要第4步

2,其他方法→vue移动端适配方案

 

作者:为光pig
链接:https://www.jianshu.com/p/d5a1cbe4742e
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

THE END
< <上一篇
下一篇>>