文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue实现PC端分辨率自适应的示例代码

2024-04-02 19:55

关注

方案

安装依赖


npm install px2rem-loader -D
npm install lib-flexible -S

引入依赖

main.js引入lib-flexible


import 'lib-flexible'

px转换成rem

vue-loaderoptions和其他样式文件loader最终是都是由build/utils.js里的方法生成的,我们只需在cssLoader后再加上一个px2remLoader即可,px2rem-loaderremUnit选项意思是 1rem=多少像素,结合lib-flexible的方案,我们将px2remLoaderoptions.remUnit设置成设计稿宽度的1/10,这里假设设计稿宽为1920px

build/utils.js中添加px2remLoader


const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

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

放进loaders数组中


// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
   const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

   if (loader) {
     loaders.push({
       loader: loader + '-loader',
       options: Object.assign({}, loaderOptions, {
         sourceMap: options.sourceMap
       })
     })
   }
   //...
 }

修改flexible.js

全局搜索flexible.js

将代码修改为适应PC端的代码


function refreshRem(){
   var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
        width = width * dpr;
    }
    //缩放比例,可按实际情况修改
    var rem = width / 8;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}

对于不想被转换的样式,可在其后添加保证不被转换

参考博客

VUE PC端适应方案flexible + px2remLoader 感谢大佬
vue实现PC端分辨率适配 感谢大佬

到此这篇关于Vue实现PC端分辨率自适应的示例代码的文章就介绍到这了,更多相关Vue PC端分辨率自适应 内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯