vue写h5自适应js代码
1.功能(在你的CSS或JavaScript代码中,可以使用基于rem单位来编写样式,这样就能根据设备自动适配布局与字体大小。)
1.根据设备屏幕宽度、设备像素比等信息动态设置根元素(通常为html)的字体大小,并以此为基础计算rem单位的实际尺寸。 2.创建或修改页面中的meta viewport标签以控制页面缩放比例。 3.注册窗口大小改变事件监听器以及pageshow事件监听器,当窗口尺寸发生变化或页面重新加载时,会自动调整字体大小和rem基准值。 4.提供了两个工具函数:D.rem2px(d)用于将rem单位转换为px单位,D.px2rem(d)用于将px单位转换为rem单位。
2.在vue中assets/js下创建flexible.js文件
! function (N, M) {
/**
* 根据当前元素宽度调整字体大小和rem单位基准值
* 该函数没有参数和返回值
*/
function L() {
// 获取当前元素的宽度
var a = I.getBoundingClientRect().width;
// 如果宽度与屏幕宽度比例大于540,则将宽度设置为540屏幕宽度的倍数
a / F > 540 && (a = 540 * F);
// 根据调整后的宽度计算新的字体大小
var d = a / 10;
// 设置元素的字体大小,并更新全局rem基准值
I.style.fontSize = d + "px", D.rem = N.rem = d
}
var K, J = N.document,
I = J.documentElement,
H = J.querySelector('meta[name="viewport"]'),
G = J.querySelector('meta[name="flexible"]'),
F = 0,
E = 0,
D = M.flexible || (M.flexible = {});
// 通过meta标签内容计算缩放比例
if (H) {
console.warn("将根据已有的meta标签来设置缩放比例");
var C = H.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
C && (E = parseFloat(C[1]), F = parseInt(1 / E))
} else if (G) {
var B = G.getAttribute("content");
if (B) {
var A = B.match(/initial\-dpr=([\d\.]+)/),
z = B.match(/maximum\-dpr=([\d\.]+)/);
A && (F = parseFloat(A[1]), E = parseFloat((1 / F).toFixed(2))), z && (F = parseFloat(z[1]), E = parseFloat((1 /
F).toFixed(2)))
}
}
// 如果没有从meta标签获取到缩放比例,根据设备信息计算缩放比例
if (!F && !E) {
var y = N.navigator.userAgent,
x = (!!y.match(/android/gi), !!y.match(/iphone/gi)),
w = x && !!y.match(/OS 9_3/),
v = N.devicePixelRatio;
F = x && !w ? v >= 3 && (!F || F >= 3) ? 3 : v >= 2 && (!F || F >= 2) ? 2 : 1 : 1, E = 1 / F
}
// 设置data-dpr属性,并在没有viewport标签时创建并添加viewport标签
if (I.setAttribute("data-dpr", F), !H) {
if (H = J.createElement("meta"), H.setAttribute("name", "viewport"), H.setAttribute("content", "initial-scale=" +
E + ", maximum-scale=" + E + ", minimum-scale=" + E + ", user-scalable=no"), I.firstElementChild) {
I.firstElementChild.appendChild(H)
} else {
var u = J.createElement("div");
u.appendChild(H), J.write(u.innerHTML)
}
}
// 监听窗口大小改变和页面展示事件,以适应不同设备和刷新页面时调整字体大小和rem基准值
N.addEventListener("resize", function () {
clearTimeout(K), K = setTimeout(L, 300)
}, !1), N.addEventListener("pageshow", function (b) {
b.persisted && (clearTimeout(K), K = setTimeout(L, 300))
}, !1),
// 初始化字体大小和rem基准值
"complete" === J.readyState ? J.body.style.fontSize = 12 * F + "px" : J.addEventListener("DOMContentLoaded",
function () {
J.body.style.fontSize = 12 * F + "px"
}, !1), L(), D.dpr = N.dpr = F, D.refreshRem = L,
// 提供rem到px和px到rem的转换函数
D.rem2px = function (d) {
var c = parseFloat(d) * this.rem;
return "string" == typeof d && d.match(/rem$/) && (c += "px"), c
}, D.px2rem = function (d) {
var c = parseFloat(d) / this.rem;
return "string" == typeof d && d.match(/px$/) && (c += "rem"), c
}
}(window, window.lib || (window.lib = {}));
3.在index.html中引入flexible.js(注意自己的路径)
<script src="/src/assets/js/flexible.js"></script>
4.使用
<div style="text-align: center;font-size: 1.5rem;font-weight: bold;">
播放音乐
</div>
注意:字体大小设置如果是px是基于CSS直接设置的,并不会受到JavaScript中通过rem设置的字体大小的影响。如果你想要文本也受到rem设置的影响,你需要确保这部分文本的字体大小是通过rem来设置的
转载自:https://juejin.cn/post/7363454217191538725