先看代码,复制使用即可,以下代码均可复制粘贴使用(我将以注释的形式解释代码左右)。
如您满意请给莫成尘点个Fabulous
牛顿说过:我之所以看得远,是因为我站在巨人的肩膀上,我们充分借鉴了element,antd等的方案来适配。
需 要 注 意 的 是 使 用 了 这 个 方 案 , 您 最 好 使 用 r e m 作 为 单 位 来 设 置 c s s , \color{#FF0000}{需要注意的是使用了这个方案,您最好使用rem作为单位来设置css,} 需要注意的是使用了这个方案,您最好使用rem作为单位来设置css, 如 果 觉 得 自 己 计 算 比 较 麻 烦 , 可 以 使 用 您 的 编 译 器 设 置 \color{#FF0000}{如果觉得自己计算比较麻烦,可以使用您的编译器设置} 如果觉得自己计算比较麻烦,可以使用您的编译器设置 也 可 以 在 蓝 湖 中 指 定 宽 度 为 120 如 下 图 片 \color{#FF0000}{也可以在蓝湖中指定宽度为120 如下图片} 也可以在蓝湖中指定宽度为120如下图片
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
</body>
<script type="text/javascript" charset="utf-8">
(function rem() {
let fonts = document.documentElement.clientWidth / 120
if (fonts <= 12) {
fonts = 12;
document.documentElement.style.fontSize = fonts + "px"
document.documentElement.style.minWidth = '1440px'
} else if (fonts > 12 && fonts <= 16) {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 120 + 'px';
}
window.onresize = rem;
})()
</script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function (event) {
document.body.style.zoom = 'reset';
document.addEventListener('keydown', function (e) {
if ((e.ctrlKey === true || e.metaKey === true) &&
(e.which === 61 || e.which === 107 || e.which === 173 || e.which === 109
|| e.which === 187 || e.which === 189)) {
e.preventDefault();
}
}, false);
document.addEventListener('mousewhell DOMMouseScroll', function (e) {
if (e.ctrlKey === true || e.metaKey === true) {
e.preventDefault();
}
}, false);
}, false);
</script>
</html>
附加和可能出现的有用信息已添加注释