vue pc分辨率自适应(vue页面自适应屏幕分辨率)

依赖项目基础配置使用vue-cli生成自适应方案核心:阿里可伸缩布局方案lib-flexiblepx转rem:px2rem,它有webpack的loaderpx2rem开始先使用vue脚手架初始化一个webpack项目vueinitwebpack项目名项目初始化好了之后,进入项目目录中(cd项目名)安装lib-flexible和px2rem-loade…

大家好,又见面了,我是你们的朋友全栈君。

依赖

项目基础配置使用 vue-cli2 生成
自适应方案核心: 阿里可伸缩布局方案 lib-flexible
px转rem:px2rem,它有webpack的loader px2rem

开始

先使用vue脚手架初始化一个webpack项目

vue init webpack 项目名

项目初始化好了之后,进入项目目录中 (cd 项目名) 安装 lib-flexiblepx2rem-loader

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

安装好了之后还需要在项目的入口文件 main.js 里引入 lib-flexible

// main.js
import 'lib-flexible'

在这里插入图片描述
接下来为了验证 lib-flexible 是否生效,可以将app.vue中的内容改成:

<template>
  <div class="wrapper">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
  </div>
</template>

<style> * { 
     margin: 0; padding: 0; } </style>

<style scoped> .wrapper div { 
     height: 1rem; } .box1 { 
     width: 2rem; background-color: coral; } .box2 { 
     width: 4rem; background-color: skyblue; } .box3 { 
     width: 6rem; background-color: palegreen; } .box4 { 
     width: 8rem; background-color: wheat; } .box5 { 
     width: 10rem; background-color: darkred; } </style>

在这里插入图片描述

但是在实际开发中,我们通过设计稿得到的单位是px,所以要将px转换成rem再进行样式中。但如果都需要手动转的话,就很麻烦,所以需要一个工具替我们完成这项工作,这个时候就需要配置px2rem了,当然,编辑器可能也要对应的插件。

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

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

 const px2remLoader = { 
   
   loader: 'px2rem-loader',
   options: { 
   
     remUnit: 192
   }
 }
 //...

放进loaders数组中

//utils.js
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
       })
     })
   }
//...

修改配置以后重启服务器,将原来app.vue文件中的样式改成:

<style scoped> .wrapper div { 
     height: 1rem; } .box1 { 
     /* 750 * 20% */ width: 150px; background-color: coral; } .box2 { 
     /* 750 * 40% */ width: 300px; background-color: skyblue; } .box3 { 
     /* 750 * 60% */ width: 450px; background-color: palegreen; } .box4 { 
     /* 750 * 80% */ width: 600px; background-color: wheat; } .box5 { 
     /* 750 * 100% */ width: 750px; background-color: darkred; } </style>

可以看到,适配依然生效。

以上是vue-cli2配置px2rem的方式,
如果脚手架用的是vue-cli3的话,由于vue-cli3 生成的目录结构没有build文件,所以在配置上也有一些不同。
vue-cli3配置方式:
找到文件 node_modules/@vue/cli-service/lib/config/css.js,添加规则:

 config.module
        .rule('css')
        .test(/\.css$/)
        .oneOf('vue')
        .resourceQuery(/\?vue/)
        .use('px2rem')
        .loader('px2rem-loader')
        .options({ 
   
          remUnit: 75
        })

**加粗样式**
remUnit的值请自行修改。

但是有一个问题,我明明设置的宽度是按1920来的,为什么计算出来1rem=54px?
在这里插入图片描述
是不是插件哪里出了问题,或者在哪里定义过跟54或者540相关的东西?
(我这里全局搜索了54找到flexible.js文件)
找到flexible.js文件看下:
在这里插入图片描述
找到问题了就解决问题,既然文件把屏幕宽度写死了,那就不写死:

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

现在再重启项目,看一下运行结果:

在这里插入图片描述

end

有问题欢迎指正!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/127968.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(3)


相关推荐

  • sqlserver查看表是否被锁_Oracle锁表查询和解锁方法

    sqlserver查看表是否被锁_Oracle锁表查询和解锁方法–查询是否锁表了selectoidfrompg_classwhererelname=’lockTableName’;selectpidfrompg_lockswhererelation=’上面查出的oid’;–如果查询到了结果,表示该表被锁则需要释放锁定selectpg_cancel_backend(上面查到的pid);…

  • laravel查询构造器DB还是ORM,这两者有什么区别,各该用在什么场景中

    laravel查询构造器DB还是ORM,这两者有什么区别,各该用在什么场景中

  • hive中操作hdfs命令

    hive中操作hdfs命令版本:Hadoop2.7.4–查看dfs帮助信息[root@hadp-mastersbin]#dfsUsage:dfs[genericoptions][-appendToFile…][-cat[-ignoreCrc]…][-checksum…][-chgrp[-R]GROUPPATH…][-chmod[-R]<MODE[,MODE]…|OCTALMODE>PATH…][-chown[-R][OWNER][:[GROUP]]PA

  • Basename_dirname

    Basename_dirnamebasenamebasename去除文件名的目录部分和后缀部分。返回一个字符串参数的基本文件名称。语法:basenameNAME[SUFFIX]basenameOPTION用法:$basename/home/me/desktop/test.txt输出:test.txt可以指定suffix参数:$basename/home/me/d

  • 网络安全与渗透测试工具导航下载_渗透师导航

    网络安全与渗透测试工具导航下载_渗透师导航一些网络安全与渗透测试工具导航,值得收藏,看看有没有你熟悉的,也许有一天你会用得到! 入门指南 在线靶场 文件上传漏洞靶场 导航 payload 子域名枚举 自动爬虫实现的子域名收集工具 waf开源及规则 web应用扫描工具 webshell检测以及病毒分析 DDos防护 Android系列工具 XSS扫描 代码审计 端口扫描、指

  • python运行代码不成功_Python | PyCharm无法直接运行(Run)脚本

    python运行代码不成功_Python | PyCharm无法直接运行(Run)脚本1刚开始是这样,笔者在PyCharm新建了一个package,然后放了一个脚本2发现无法直接运行:没有Run选项,只有Rununittests选项。于是把脚本拷贝到另一个不是package的目录下3发现在这个目录下,除了这个脚本以外,其余的脚本都是可以运行的4看来是脚本的内容有问题了。看看笔者这个cannot_run的脚本5笔者在Python自带的交互环境IDLE上,运行这个代码,也是正常的。真…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号