怎么找到网站的空间服务商,主流网站开发技术,企业网站seo优化外包,互联免费主机方案一#xff1a;使用 scale-box 组件
属性#xff1a; width 宽度 默认 1920height 高度 默认 1080bgc 背景颜色 默认 transparentdelay自适应缩放防抖延迟时间#xff08;ms#xff09; 默认 100
vue2版本#xff1a;vue2大屏适配缩放组件#xff08;vu…方案一使用 scale-box 组件
属性 width 宽度 默认 1920height 高度 默认 1080bgc 背景颜色 默认 transparentdelay自适应缩放防抖延迟时间ms 默认 100
vue2版本vue2大屏适配缩放组件vue2-scale-box - npm
npm install vue2-scale-box
或者
yarn add vue2-scale-box
使用方法
templatedivscale-box :width1920 :height1080 bgctransparent :delay100router-view //scale-box/div
/templatescript
import ScaleBox from vue2-scale-box;export default {components: { ScaleBox },
};
/scriptstyle langscss
body {margin: 0;padding: 0;background: url(/assets/bg.jpg);
}
/style
vue3版本vue3大屏适配缩放组件vue3-scale-box - npm
npm install vue3-scale-box
或者
yarn add vue3-scale-box
使用方法
templateScaleBox :width1920 :height1080 bgctransparent :delay100router-view //ScaleBox
/templatescript
import ScaleBox from vue3-scale-box;
/scriptstyle langscss
body {margin: 0;padding: 0;background: url(/assets/bg.jpg);
}
/style
方案二设置设备像素比例设备像素比
在项目的 utils 下新建 devicePixelRatio.js 文件
class devicePixelRatio {/* 获取系统类型 */getSystem() {const agent navigator.userAgent.toLowerCase();const isMac /macintosh|mac os x/i.test(navigator.userAgent);if (isMac) return false;// 目前只针对 win 处理其它系统暂无该情况需要则继续在此添加即可if (agent.indexOf(windows) 0) return true;}/* 监听方法兼容写法 */addHandler(element, type, handler) {if (element.addEventListener) {element.addEventListener(type, handler, false);} else if (element.attachEvent) {element.attachEvent(on type, handler);} else {element[on type] handler;}}/* 校正浏览器缩放比例 */correct() {// 页面devicePixelRatio设备像素比例变化后计算页面body标签zoom修改其大小来抵消devicePixelRatio带来的变化document.getElementsByTagName(body)[0].style.zoom 1 / window.devicePixelRatio;}/* 监听页面缩放 */watch() {const that this;// 注意: 这个方法是解决全局有两个window.resizethat.addHandler(window, resize, function () {that.correct(); // 重新校正浏览器缩放比例});}/* 初始化页面比例 */init() {const that this;// 判断设备只在 win 系统下校正浏览器缩放比例if (that.getSystem()) {that.correct(); // 校正浏览器缩放比例that.watch(); // 监听页面缩放}}
}
export default devicePixelRatio;
在 App.vue 中引入并使用即可
templatedivrouter-view //div
/templatescript
import devPixelRatio from /utils/devicePixelRatio.js;export default {created() {new devPixelRatio().init(); // 初始化页面比例},
};
/scriptstyle langscss
body {margin: 0;padding: 0;
}
/style
方案三通过 JS 设置 zoom 属性调整缩放比例
在项目的 utils 下新建 monitorZoom.js 文件
export const monitorZoom () {let ratio 0,screen window.screen,ua navigator.userAgent.toLowerCase();if (window.devicePixelRatio ! undefined) {ratio window.devicePixelRatio;} else if (~ua.indexOf(msie)) {if (screen.deviceXDPI screen.logicalXDPI) {ratio screen.deviceXDPI / screen.logicalXDPI;}} else if (window.outerWidth ! undefined window.innerWidth ! undefined) {ratio window.outerWidth / window.innerWidth;}if (ratio) {ratio Math.round(ratio * 100);}return ratio;
};
在 main.js 中引入并使用即可
import { monitorZoom } from /utils/monitorZoom.js;
const m monitorZoom();
if (window.screen.width * window.devicePixelRatio 3840) {document.body.style.zoom 100 / (Number(m) / 2); // 屏幕为 4k 时
} else {document.body.style.zoom 100 / Number(m);
}
完整代码
import Vue from vue;
import App from ./App.vue;
import router from ./router;/* 调整缩放比例 start */
import { monitorZoom } from /utils/monitorZoom.js;
const m monitorZoom();
if (window.screen.width * window.devicePixelRatio 3840) {document.body.style.zoom 100 / (Number(m) / 2); // 屏幕为 4k 时
} else {document.body.style.zoom 100 / Number(m);
}
/* 调整缩放比例 end */Vue.config.productionTip false;new Vue({router,render: (h) h(App),
}).$mount(#app);
获取屏幕的分辨率
获取屏幕的宽
window.screen.width * window.devicePixelRatio
获取屏幕的高
window.screen.height * window.devicePixelRatio
移动端适配使用 postcss-px-to-viewport 插件
官网https://github.com/evrone/postcss-px-to-viewport
npm install postcss-px-to-viewport --save-dev
或者
yarn add -D postcss-px-to-viewport
配置适配插件的参数在项目根目录创建 .postcssrc.js 文件[与 src 目录平级]粘贴以下代码即可
module.exports {plugins: {autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀如-webkit--moz-等等postcss-px-to-viewport: {unitToConvert: px, // 需要转换的单位默认为pxviewportWidth: 390, // UI设计稿的宽度unitPrecision: 6, // 转换后的精度即小数点位数propList: [*], // 指定转换的css属性的单位*代表全部css属性的单位都进行转换viewportUnit: vw, // 指定需要转换成的视窗单位默认vwfontViewportUnit: vw, // 指定字体需要转换成的视窗单位默认vwselectorBlackList: [wrap], // 需要忽略的CSS选择器不会转为视口单位使用原有的px等单位minPixelValue: 1, // 默认值1小于或等于1px则不进行转换mediaQuery: false, // 是否在媒体查询的css代码中也进行转换默认falsereplace: true, // 是否直接更换属性值而不添加备用属性exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件用正则做目录名匹配例如 node_modules 下的文件landscape: false, // 是否处理横屏情况landscapeUnit: vw, // 横屏时使用的视窗单位默认vwlandscapeWidth: 2048 // 横屏时使用的视口宽度}}
};
