gpt4 book ai didi

vue项目PC端如何适配不同分辨率屏幕

转载 作者:我是一只小鸟 更新时间:2023-03-05 22:35:53 37 4
gpt4 key购买 nike

闲聊:

年前小颖第一家公司同事问我有做过pc端适配的项目吗,我给妹纸说了下,结果发现没说完,自己当时也没想起来,今天干脆总结下,方便自己和大家日后查看 。

第一步:

安装postcss-px2rem、px2rem-loader 。

打开命令行工具,输入以下指令安装插件 。

                          npm install postcss-px2rem px2rem-loader --save
                        

安装完后package.json文件会多如图俩插件 。

第二步:

在根目录src中新建utils目录下新建rem.js等比适配文件 。

                          const baseSize = 16

                          
                            //
                          
                          
                             设置 rem 函数
                          
                          
                            function
                          
                          
                             setRem() {
    
                          
                          
                            //
                          
                          
                             当前页面宽度相对于 1920宽的缩放比例,可根据自己需要修改。
                          
                          
    const scale = document.documentElement.clientWidth / 1920
    
                          
                            //
                          
                          
                             设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,可根据实际业务需求调整)
                          
                          
    document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
                          
                            
}

                          
                          
                            //
                          
                          
                             初始化
                          
                          
                            setRem()

                          
                          
                            //
                          
                          
                             改变窗口大小时重新设置 rem
                          
                          
window.onresize = 
                          
                            function
                          
                          
                             () {
    setRem()
}
                          
                        

第三步:

在main.js中引入适配文件 。

                          import './utils/rem'
                        

第四步:

vue.config.js文件中配置插件 。

                          
                            //
                          
                          
                             引入等比适配插件
                          
                          
const px2rem = require('postcss-px2rem'
                          
                            )

                          
                          
                            //
                          
                          
                             配置基本大小
                          
                          
const postcss =
                          
                             px2rem({
  
                          
                          
                            //
                          
                          
                             基准大小 baseSize,需要和rem.js中相同
                          
                          
  remUnit: 16
                          
                            
})
 

                          
                          
                            //
                          
                          
                             使用等比适配插件
                          
                          
module.exports =
                          
                             {
  lintOnSave: 
                          
                          
                            true
                          
                          
                            ,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
        ]
      }
    }
  }
}
                          
                        

  。

最后此篇关于vue项目PC端如何适配不同分辨率屏幕的文章就讲到这里了,如果你想了解更多关于vue项目PC端如何适配不同分辨率屏幕的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

37 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com