• vue 项目的屏幕自适应方案


    方案一:使用 scale-box 组件
    属性:
    1. width 宽度 默认 1920
    2. height 高度 默认 1080
    3. bgc 背景颜色 默认 "transparent"
    4. delay自适应缩放防抖延迟时间(ms) 默认 100

    vue2版本:vue2大屏适配缩放组件(vue2-scale-box - npm)

    npm install vue2-scale-box

    使用方法:

    1. <script>
    2. import ScaleBox from "vue2-scale-box"
    3. export default {
    4. components: { ScaleBox },
    5. };
    6. script>
    7. <style lang="scss">
    8. body {
    9. margin: 0;
    10. padding: 0;
    11. }
    12. style>

     vue3版本:vue3大屏适配缩放组件(vue3-scale-box - npm)

    npm install vue3-scale-box 

    使用方法: 

    1. <script>
    2. import ScaleBox from "vue3-scale-box";
    3. script>
    4. <style lang="scss">
    5. body {
    6. margin: 0;
    7. padding: 0;
    8. }
    9. style>
     方案二:设置设备像素比例(设备像素比)

    在项目的 utils 下新建 devicePixelRatio.js 文件

    1. class devicePixelRatio {
    2. /* 获取系统类型 */
    3. getSystem() {
    4. const agent = navigator.userAgent.toLowerCase();
    5. const isMac = /macintosh|mac os x/i.test(navigator.userAgent);
    6. if (isMac) return false;
    7. // 目前只针对 win 处理,其它系统暂无该情况,需要则继续在此添加即可
    8. if (agent.indexOf("windows") >= 0) return true;
    9. }
    10. /* 监听方法兼容写法 */
    11. addHandler(element, type, handler) {
    12. if (element.addEventListener) {
    13. element.addEventListener(type, handler, false);
    14. } else if (element.attachEvent) {
    15. element.attachEvent("on" + type, handler);
    16. } else {
    17. element["on" + type] = handler;
    18. }
    19. }
    20. /* 校正浏览器缩放比例 */
    21. correct() {
    22. // 页面devicePixelRatio(设备像素比例)变化后,计算页面body标签zoom修改其大小,来抵消devicePixelRatio带来的变化
    23. document.getElementsByTagName("body")[0].style.zoom =
    24. 1 / window.devicePixelRatio;
    25. }
    26. /* 监听页面缩放 */
    27. watch() {
    28. const that = this;
    29. // 注意: 这个方法是解决全局有两个window.resize
    30. that.addHandler(window, "resize", function () {
    31. that.correct(); // 重新校正浏览器缩放比例
    32. });
    33. }
    34. /* 初始化页面比例 */
    35. init() {
    36. const that = this;
    37. // 判断设备,只在 win 系统下校正浏览器缩放比例
    38. if (that.getSystem()) {
    39. that.correct(); // 校正浏览器缩放比例
    40. that.watch(); // 监听页面缩放
    41. }
    42. }
    43. }
    44. export default devicePixelRatio;

    在 App.vue 中引入并使用即可

    1. <script>
    2. import devPixelRatio from "@/utils/devicePixelRatio.js";
    3. export default {
    4. created() {
    5. new devPixelRatio().init(); // 初始化页面比例
    6. },
    7. };
    8. script>
    9. <style lang="scss">
    10. body {
    11. margin: 0;
    12. padding: 0;
    13. }
    14. style>
    方案三:通过 JS 设置 zoom 属性调整缩放比例

    在项目的 utils 下新建 monitorZoom.js 文件

    1. export const monitorZoom = () => {
    2. let ratio = 0,
    3. screen = window.screen,
    4. ua = navigator.userAgent.toLowerCase();
    5. if (window.devicePixelRatio !== undefined) {
    6. ratio = window.devicePixelRatio;
    7. } else if (~ua.indexOf("msie")) {
    8. if (screen.deviceXDPI && screen.logicalXDPI) {
    9. ratio = screen.deviceXDPI / screen.logicalXDPI;
    10. }
    11. } else if (
    12. window.outerWidth !== undefined &&
    13. window.innerWidth !== undefined
    14. ) {
    15. ratio = window.outerWidth / window.innerWidth;
    16. }
    17. if (ratio) {
    18. ratio = Math.round(ratio * 100);
    19. }
    20. return ratio;
    21. };

    在 main.js 中引入并使用即可

    1. import { monitorZoom } from "@/utils/monitorZoom.js";
    2. const m = monitorZoom();
    3. if (window.screen.width * window.devicePixelRatio >= 3840) {
    4. document.body.style.zoom = 100 / (Number(m) / 2); // 屏幕为 4k 时
    5. } else {
    6. document.body.style.zoom = 100 / Number(m);
    7. }

    完整代码

    1. import Vue from "vue";
    2. import App from "./App.vue";
    3. import router from "./router";
    4. /* 调整缩放比例 start */
    5. import { monitorZoom } from "@/utils/monitorZoom.js";
    6. const m = monitorZoom();
    7. if (window.screen.width * window.devicePixelRatio >= 3840) {
    8. document.body.style.zoom = 100 / (Number(m) / 2); // 屏幕为 4k 时
    9. } else {
    10. document.body.style.zoom = 100 / Number(m);
    11. }
    12. /* 调整缩放比例 end */
    13. Vue.config.productionTip = false;
    14. new Vue({
    15. router,
    16. render: (h) => h(App),
    17. }).$mount("#app");
    获取屏幕的分辨率

    获取屏幕的宽:window.screen.width * window.devicePixelRatio

    获取屏幕的高:window.screen.height * window.devicePixelRatio

    移动端适配(使用 postcss-px-to-viewport 插件)

    npm install postcss-px-to-viewport --save-dev 

    配置适配插件的参数(在项目根目录创建 .postcssrc.js 文件[与 src 目录平级])粘贴以下代码即可 

    1. module.exports = {
    2. plugins: {
    3. autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀,如-webkit-,-moz-等等
    4. "postcss-px-to-viewport": {
    5. unitToConvert: "px", // 需要转换的单位,默认为"px"
    6. viewportWidth: 390, // UI设计稿的宽度
    7. unitPrecision: 6, // 转换后的精度,即小数点位数
    8. propList: ["*"], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换
    9. viewportUnit: "vw", // 指定需要转换成的视窗单位,默认vw
    10. fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位,默认vw
    11. selectorBlackList: ["wrap"], // 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位
    12. minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换
    13. mediaQuery: false, // 是否在媒体查询的css代码中也进行转换,默认false
    14. replace: true, // 是否直接更换属性值,而不添加备用属性
    15. exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件,用正则做目录名匹配,例如 'node_modules' 下的文件
    16. landscape: false, // 是否处理横屏情况
    17. landscapeUnit: "vw", // 横屏时使用的视窗单位,默认vw
    18. landscapeWidth: 2048 // 横屏时使用的视口宽度
    19. }
    20. }
    21. };

     

  • 相关阅读:
    【Qt常用控件】—— 多元素控件
    注解的应用:模拟Junit框架
    Unity-ProBuilder
    Postman接口测试流程
    Information Sciences 2022 | 利用图嵌入和图神经网络实现社交网络中的影响力最大化
    Ubuntu22.04安装libudev-dev时的Bug
    HTML期末作业 计算机毕业设计 html css javascript食品餐饮行业网站(10页)
    Unity中用Natrue Renderer做自己的地形Terrain.
    应力分析概要
    Web漏洞之XXE初探
  • 原文地址:https://blog.csdn.net/qq_49080170/article/details/134299787