一、安装并配置相应插件

1.安装lib-flexible与postcss-pxtorem

使用npm下载包
注：下载 postcss 版本为5.1.1(其它版本可能会出现报错)

npm i lib-flexible
npm i postcss-pxtorem@5.1.1

2.配置lib-flexible与postcss-pxtorem

配置 postcss-pxtorem 设置页面px自动转换为rem

创建vue.config.js文件，添加如下配置：

//vue.config.js
const pxtorem = require('postcss-pxtorem')module.exports = {css: {loaderOptions: {postcss: {plugins: [pxtorem({rootValue: 80,  //这里设置参考"设计稿大小"和自己认为"合适的划分比例"（例：1920/24 = 80)propList: ['*'],})]}}}
}

注：该插件可以把组件库的px也转化为rem

按需修改 lib-flexible 源码配置

在 main.js 引入 lib-flexible

import 'lib-flexible'

修改"node_modules\lib-flexible\flexible.js"下源码配置

function refreshRem(){var width = docEl.getBoundingClientRect().width;//这里代表适配744~5760宽度的屏幕视图，可以按需修改if (width / dpr < 744) {width = 744 * dpr;} else if (width / dpr > 5760) {width = 5760 * dpr;}//这里width的相除值需要和前面vue.config.js文件下rootValue的相除值相同var rem = width / 24;docEl.style.fontSize = rem + 'px';flexible.rem = win.rem = rem;
}

效果：

二、设置移动端适配

这里主要讲将pc端页面等比缩放到移动端显示，并且支持移动端用户对页面进行放大和缩小查看
于 src 下新建 utils 文件在其中创建 adaptive.config.js文件
编写如下代码：

import { onMounted } from "vue";// 判断客户端设备
const _isMobile = () => {let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);return flag;
};
// "移动端"手动添加 mate 标签函数
const addMeta = (name, content) => {const meta = document.createElement("meta");meta.content = content;meta.name = name;document.getElementsByTagName("head")[0].appendChild(meta);
};
// 渲染页面配置 mate 标签
export default function adaptive() {onMounted(() => {if (_isMobile()) {console.log("手机");addMeta("viewport", "user-scalable=yes");} else {console.log("pc");}});
}

在 App.vue 下导入使用：

<script>
import adaptive from './utils/adaptive.config';
export default {setup() {adaptive()},
}
</script>

注：如果直接修改html上meta标签属性可能是影响到 lib-flexible 的原因会出现移动端无法等比缩放的问题出现，故用此方法移动端下动态修改meta标签。

三、注意问题

element有些组件会有内联样式，postcss-pxtorem无法使内联样式由px转换为rem
这里建议自己注意一下在组件的属性值设置并自行修改，或者用媒体查询进行组件样式修改

例如：

提示：文章到此结束，文章仅为个人学习记录，若有不足还请大家指出。

移动端与大屏幕自适应适配方案相关推荐

移动端常用的几种适配方案
目录一.媒体查询 1.1 媒体查询的优劣势 1.2 媒体查询的应用场景二.媒体查询+rem 2.1 如何进行等比缩放? 2.2 如何在前端开发中应用等比缩放这个计算公式? 2.3 应用实例三.J ...
摩客怎么设置安卓的dp_安卓屏幕完美适配方案——独家秘笈
一.为什么要适配由于Android系统的开放性,任何用户.开发者.硬件厂商.运营商都可以对Android系统和硬件进行定制,修改成他们想要的样子. 但是这种"碎片化"到达什么程度 ...
安卓屏幕完美适配方案——独家秘笈
一.为什么要适配由于Android系统的开放性,任何用户.开发者.硬件厂商.运营商都可以对Android系统和硬件进行定制,修改成他们想要的样子. 但是这种"碎片化"到达什么程度 ...
可视化大屏幕的适配方法-vw/vh
vw和vh适配方案屏幕视口宽度 = 100vw,屏幕视口高度 = 100vh vw和vh也是css中标准的单位,和px,rem, %一样 vw和vh适配方案,按照设计稿的尺寸,将px按比例计算转为v ...
【Flutter】屏幕像素适配方案 ( flutter_screenutil 插件 )
文章目录一.推荐使用 flutter_screenutil 插件二.flutter_screenutil 插件使用 1.导入 flutter_screenutil 插件依赖 2. flutter_ ...
【可视化大屏】屏幕多分辨率适配方案
一.任意屏幕下保持16:9的比例等比缩放 https://blog.csdn.net/weixin_57756140/article/details/123681114 1.背景数据大屏项目,需要适 ...
数据可视化大屏，屏幕多分辨率适配方案，且在任意屏幕下保持16:9的比例等比缩放
背景数据大屏项目,需要适配不同屏幕,且在任意屏幕下保持16:9的比例,保持显示效果一致,屏幕比例不一致两边留黑即可分析不同屏幕宽高比例(和设计稿16:9)相比会有两种情况: 1.更宽:(wind ...
vw 前端_【前端适配】vw+rem自适应适配方案
先说好处:无需借助js,只用css就可以实现一定屏宽范围内元素大小随屏幕宽度改变平稳变化. 再说用法: 第一步:元素大小单位选用rem. 第二步:根据设计稿的屏幕宽度设置html的font-size大 ...
安卓屏幕完美适配方案，成功入职网易月薪35K
2.分辨率: 手机在横向.纵向上的像素点数总和,一般描述成宽*高 , 即横向像素点个数*纵向像素点个数. 3.屏幕尺寸(in): 手机对角线的物理尺寸,单位英寸(inch),一英寸大约2.54cm ...

移动端与大屏幕自适应适配方案

vue3+cli4.x+lib-flexible+postcss-pxtorem的移动端与大屏幕适配方案

一、安装并配置相应插件

1.安装lib-flexible与postcss-pxtorem

2.配置lib-flexible与postcss-pxtorem

配置 postcss-pxtorem 设置页面px自动转换为rem

按需修改 lib-flexible 源码配置

二、设置移动端适配

三、注意问题

移动端与大屏幕自适应适配方案相关推荐

最新文章

热门文章