vue实现PC端分辨率适配操作
作者:韩大璐 发布时间:2024-05-09 09:29:57
依赖
项目基础配置使用 vue-cli 生成
自适应方案核心: 阿里可伸缩布局方案 lib-flexible
px转rem:px2rem,它有webpack的loader px2rem
开始
先使用vue脚手架初始化一个webpack项目
vue init webpack 项目名
项目初始化好了之后,进入项目目录中 (cd 项目名) 安装 lib-flexible 和 px2rem-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
有问题欢迎指正!
来源:https://blog.csdn.net/weixin_41257563/article/details/97266234
猜你喜欢
- 使用Python的人都知道range()函数和list很方便,今天再用到他的时候发现了很多以前看到过但是忘记的细节。这里记录一下range(
- 虽然小型web应用程序用单个脚本可以很方便,但这种方法却不能很好地扩展。随着应用变得复杂,在单个大的源文件中处理会变得问题重重。与大多数其他
- 一、 什么是多态<1>一种类型具有多种类型的能力<2>允许不同的对象对同一消息做出灵活的反应<3>以一种
- 一、mongodb安装在官网下载适应于自己平台的mongodb,在此安装环境为Windows7-64bit下载完成后直接安装,连续点击nex
- 本文实例讲述了php实现mysql事务处理的方法。分享给大家供大家参考。具体分析如下:要实现本功能的条件是环境 mysql 5.2 /php
- 一、乱码问题描述经常在爬虫或者一些操作的时候,经常会出现中文乱码等问题,如下原因是源网页编码和爬取下来后的编码格式不一致 二、利用
- 假设有2个有序列表l1、l2,如何效率比较高的将2个list合并并保持有序状态,这里默认排序是正序。思路是比较简单的,无非是依次比较l1和l
- 1、首先安装火狐浏览器有单独文章分享怎么安装2、搭建python环境安装python,安装的时候把path选好,就不用自己在配置,安装方法有
- 如何删除表中的数据Mysql删除表中的数据有三种方法,分别是deletedroptruncate一、delete删除表中的数据delete好
- 日志作为项目开发和运行中必备组件,python提供了内置的logging模块来完成这个工作;借助 TimedRotatingFileHand
- 本文实例讲述了python写入xml文件的方法。分享给大家供大家参考。具体分析如下:本范例通过xml模块对xml文件进行写入操作from x
- 我们需要将【小组销量排名表.xlsx】通过邮件发送给【组长邮箱.xlsx】中的各个组长。这里会学一个新的知识点—&
- 1 之前我们学习了列表,知道列表可以用来存储一组数据,可以增删改查,可以遍历2 之前我们学习了字典,知道字典可以用来存储键值对,与列表类似,
- 本文实例讲述了python实现获取序列中最小的几个元素。分享给大家供大家参考。具体方法如下:import heapq import rand
- WaitGroup概念Go标准库提供了WaitGroup原语, 可以用它来等待一批 Goroutine 结束底层数据结构// A WaitG
- 本文以Python开发为例来进行说明,环境说明:(1) Python 3.x(我用的版本是 3.9 版本)(2)IDE开具 PyCharm(
- //比较数组是否相同 modeler.compArray=function(array1,array2) { &nb
- 一、背景俗话说,工欲善其事,必先利其器。go 作为一个对基础功能封装非常好的语言,对编码体验,如何更高效地写出高性能代码,都是考虑非常好的。
- 安装了个5.5版本的mysql,字符集出现了问题,之前的mysql服务器都是通过在my.cnf配置文件中进行配置便可,可是今儿怎么着都不行一
- 关于F.normalize计算理解动机最近多次看到该方法出现,于是准备了解一下,搜了后发现原来是所谓的L2 norm计算简介函数定义torc