首页 > 其他分享 >vue2实现pc端自适应分辨率

vue2实现pc端自适应分辨率

时间:2023-09-14 10:24:10浏览次数:43  
标签:scale 端自 doc pc vue2 var flexible match dpr

思路:使用lib-flexible结合postcss-pxtorem实现

第一步

在项目utils下建立flexible.js文件(直接下载则不用新建该文件)

第二部

复制以下代码到刚建好的文件中或者直接yarn install lib-flexible-pc-y

// 基于 libflexible 用来适配pc端
(function (win, lib) {
	var doc = win.document;
	var docEl = doc.documentElement;
	var metaEl = doc.querySelector('meta[name="viewport"]');
	var flexibleEl = doc.querySelector('meta[name="flexible"]');
	var dpr = 0;
	var scale = 0;
	var tid;
	var flexible = lib.flexible || (lib.flexible = {});

	if (metaEl) {
		console.warn('将根据已有的meta标签来设置缩放比例');
		var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
		if (match) {
			scale = parseFloat(match[1]);
			dpr = parseInt(1 / scale);
		}
	} else if (flexibleEl) {
		var content = flexibleEl.getAttribute('content');
		if (content) {
			var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
			var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
			if (initialDpr) {
				dpr = parseFloat(initialDpr[1]);
				scale = parseFloat((1 / dpr).toFixed(2));
			}
			if (maximumDpr) {
				dpr = parseFloat(maximumDpr[1]);
				scale = parseFloat((1 / dpr).toFixed(2));
			}
		}
	}

	if (!dpr && !scale) {
		var isAndroid = win.navigator.appVersion.match(/android/gi);
		var isIPhone = win.navigator.appVersion.match(/iphone/gi);
		var devicePixelRatio = win.devicePixelRatio;
		if (isIPhone) {
			// iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
			if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
				dpr = 3;
			} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
				dpr = 2;
			} else {
				dpr = 1;
			}
		} else {
			// 其他设备下,仍旧使用1倍的方案
			dpr = 1;
		}
		scale = 1 / dpr;
	}

	docEl.setAttribute('data-dpr', dpr);
	if (!metaEl) {
		metaEl = doc.createElement('meta');
		metaEl.setAttribute('name', 'viewport');
		metaEl.setAttribute(
			'content',
			'initial-scale=' +
				scale +
				', maximum-scale=' +
				scale +
				', minimum-scale=' +
				scale +
				', user-scalable=no'
		);
		if (docEl.firstElementChild) {
			docEl.firstElementChild.appendChild(metaEl);
		} else {
			var wrap = doc.createElement('div');
			wrap.appendChild(metaEl);
			doc.write(wrap.innerHTML);
		}
	}

	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;
	}

	win.addEventListener(
		'resize',
		function () {
			clearTimeout(tid);
			tid = setTimeout(refreshRem, 300);
		},
		false
	);
	win.addEventListener(
		'pageshow',
		function (e) {
			if (e.persisted) {
				clearTimeout(tid);
				tid = setTimeout(refreshRem, 300);
			}
		},
		false
	);

	if (doc.readyState === 'complete') {
		doc.body.style.fontSize = 12 * dpr + 'px';
	} else {
		doc.addEventListener(
			'DOMContentLoaded',
			function (e) {
				doc.body.style.fontSize = 12 * dpr + 'px';
			},
			false
		);
	}

	refreshRem();

	flexible.dpr = win.dpr = dpr;
	flexible.refreshRem = refreshRem;
	flexible.rem2px = function (d) {
		var val = parseFloat(d) * this.rem;
		if (typeof d === 'string' && d.match(/rem$/)) {
			val += 'px';
		}
		return val;
	};
	flexible.px2rem = function (d) {
		var val = parseFloat(d) / this.rem;
		if (typeof d === 'string' && d.match(/px$/)) {
			val += 'rem';
		}
		return val;
	};
})(window, window['lib'] || (window['lib'] = {}));

第三步

下载postcss-pxtorem
yarn install [email protected](5.1.1较稳定)

第四步

项目postcssrc.js文件下加入以下代码

const px2rem = require('postcss-pxtorem');
const postcss = px2rem({
  rootValue: 192,
  unitPrecision: 5,
  propList:['*']
});

其他配置可参考 https://www.npmjs.com/package/postcss-pxtorem

第五步

项目main.js中引入文件

import '@/utils/flexible.js

直接通过yarn下载的flexible文件,则直接引入即可
import 'lib-flexible-pc-y'

标签:scale,端自,doc,pc,vue2,var,flexible,match,dpr
From: https://www.cnblogs.com/idrinkmilk/p/17701790.html

相关文章

  • PCIe 5.0 SSD明年底杀入笔记本!慧荣主控用上6nm先进工艺
    PCIe5.0SSD的严重发热问题大家应该都不陌生,有实验显示无风扇时连续写入55秒之后就会罢工,一个重要原因就是群联E26主控采用了相对落后的12nm工艺,功耗和发热无法控制。这就导致PCIe5.0SSD现在只能用在桌面平台,而且基本离不开风扇的辅助。近日,慧荣披露了他们的PCIe5.0SSD主控......
  • 上架亚马逊儿童折叠式和非折叠式椅子和凳子的检测认证?CPC认证
    本政策适用的儿童折叠式和非折叠式椅子和凳子儿童折叠式和非折叠式椅子和凳子是带有刚性框架的座椅家具,用于支撑儿童的身体,使其能够以直立或倾斜的姿势坐立或休息。本政策适用的折叠椅和折叠凳的座部高度不超过15英寸,可能带或不带摇摆底座,儿童可在无人帮助的情况下坐上去或下来。......
  • 从零开始使用vue2+element搭建后台管理系统(实现导出excel表格的功能)
    首先参阅了以下文档:https://panjiachen.gitee.io/vue-element-admin-site/zh/feature/component/excel.html#excel-%E5%AF%BC%E5%87%BAhttps://blog.csdn.net/weixin_42028153/article/details/124804841核心思想:抄一下vue-element-admin这个很棒的开源集成后台管理系统中所提......
  • VUE2教程-基础-Class 与 Style 绑定
    Class与Style绑定操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是attribute,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js做了专门的增强......
  • VUE2基础-Vue实例
    Vue实例创建一个Vue实例 每个Vue应用都是通过用 Vue 函数创建一个新的 Vue实例开始的:varvm=newVue({//选项})虽然没有完全遵循 MVVM模型,但是Vue的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel的缩写)这个变量名表示Vue实例。当创建......
  • VUE2教程-基础-简介
    Vue.js是什么Vue(读音/vjuː/,类似于 view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue......
  • rpc、rmi
    参考:https://blog.csdn.net/CAUC_lin/article/details/126721115RMI、RPC区别:https://blog.csdn.net/bandaoyu/article/details/107351265RPC定义RPC全称为remoteprocedurecall,即远程过程调用。借助RPC可以做到像本地调用一样调用远程服务,是一种进程间的通信方式。RPC并不......
  • 3.2 DLL注入:远程APC异步注入
    APC(AsynchronousProcedureCall)异步过程调用是一种Windows操作系统的核心机制,它允许在进程上下文中执行用户定义的函数,而无需创建线程或等待OS执行完成。该机制适用于一些频繁的、短暂的或非常细微的操作,例如改变线程优先级或通知线程处理任务。在APC机制中,当某些事件发生时(例如......
  • 2020 ICPC 南京站
    F.Fireworks假设最优解第一次点火前制作了\(x\)个,并且其中没有完美的,那么又回到了初始状态,一定还是做\(x\)个后点火,所以每次点火前制作的烟花个数是一定的,需要决策的是\(x\)设\(f(x)\)为做\(x\)个点火的期望时间,这是一个几何分布,\(\displaystylef(x)=\frac{nx+m}{1-(......
  • OpenTiny Vue组件库实现跨框架(vue2、vue3、react、solid)
    本文由TinyVue组件库核心成员郑志超分享,首先分享了实现跨框架组件库的必要性,同时通过演示demo和实际操作向我们介绍了如何实现一个跨框架的组件库。前言前端组件库跨框架是什么?前端组件库跨框架是指在不同的前端框架(如React、Vue、Solid等)之间共享和复用组件的能力。这种能力可以让......