pc 大屏适配


  1. css

  2. 复制代码

  3. npm i autofit.js

  • 引入

import autofit from 'autofit.js'
  • 快速开始

autofit.init()

默认参数为1920*929(即去掉浏览器头的1080), 直接在大屏启动时调用即可

  • 使用


  1. // App.vue 需要在renderDom挂载到dom之后,才可以生效

  2. export default {  

  3.   mounted() {

  4.   autofit.init({

  5.         designHeight: 1080,

  6.         designWidth: 1920,

  7.         renderDom:"#app",

  8.         resize: true

  9.     })

  10.   },

  11. }

vue3.0

onUnmounted(() => {

        // 3. 如果是单个页面做自适应,需要在页面销毁后删除插件,不然可能会影响其他页面,为了保险个人建议App.vue也加上组件销毁的生命周期

        autofit.off();

    });

    onMounted(() => {

        autofit.init(

            {

                dh: 1080,

                dw: 1920,

                el: '.large-screen',

                resize: true

            },

            false

        );

    });

以上使用的是默认参数,可根据实际情况调整,参数分别为

  • renderDom(可选):渲染的dom,默认是 "#app",必须使用id选择器

  • designWidth(可选):设计稿的宽度,默认是 1920

  • designHeight(可选):设计稿的高度,默认是 929 ,如果项目以全屏展示,则可以设置为1080

  • resize(可选):是否监听resize事件,默认是 true

第二种

1. 安装:

cnpm install lib-flexible postcss-plugin-px2rem --save-dev

2. 配置rem:

在main.js 文件中导入: import "lib-flexible/flexible";

rem 就可以生效了,项目中我们正常写px会自动帮我们转换为rem

3. 配置px—>rem:

创建vue.config.js文件

module.exports = {
  // rem适配
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-plugin-px2rem')({
            rootValue: 75, //换算基数, 默认100  ,这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
            // unitPrecision: 5, //允许REM单位增长到的十进制数字。
            //propWhiteList: [],  //默认值是一个空数组,这意味着禁用白名单并启用所有属性。
            // propBlackList: [], //黑名单
            // exclude: /(page_pc)/i,  //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值
            exclude: /node_modules/i,
            // selectorBlackList: ['van-'], //要忽略并保留为px的选择器,我们一般不转换vantui中的大小
            // ignoreIdentifier: false,  //(boolean/string)忽略单个属性的方法,启用ignoreidentifier后,replace将自动设置为true。
            // replace: true, // (布尔值)替换包含REM的规则,而不是添加回退。
            mediaQuery: false,  //(布尔值)允许在媒体查询中转换px。
            minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
          }),
        ]
      }
    }
  },
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值