经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue项目PC端如何适配不同分辨率屏幕
来源:cnblogs  作者:爱喝酸奶的吃货  时间:2023/3/6 9:15:40  对本文有异议

闲聊:

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

第一步:

安装postcss-px2rem、px2rem-loader

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

  1. npm install postcss-px2rem px2rem-loader --save

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

第二步:

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

  1. const baseSize = 16
  2. // 设置 rem 函数
  3. function setRem() {
  4. // 当前页面宽度相对于 1920宽的缩放比例,可根据自己需要修改。
  5. const scale = document.documentElement.clientWidth / 1920
  6. // 设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,可根据实际业务需求调整)
  7. document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
  8. }
  9. // 初始化
  10. setRem()
  11. // 改变窗口大小时重新设置 rem
  12. window.onresize = function () {
  13. setRem()
  14. }

第三步:

在main.js中引入适配文件

  1. import './utils/rem'

第四步:

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

  1. // 引入等比适配插件
  2. const px2rem = require('postcss-px2rem')
  3. // 配置基本大小
  4. const postcss = px2rem({
  5. // 基准大小 baseSize,需要和rem.js中相同
  6. remUnit: 16
  7. })
  8. // 使用等比适配插件
  9. module.exports = {
  10. lintOnSave: true,
  11. css: {
  12. loaderOptions: {
  13. postcss: {
  14. plugins: [
  15. postcss
  16. ]
  17. }
  18. }
  19. }
  20. }

 

原文链接:https://www.cnblogs.com/yingzi1028/p/17180872.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号