飞道的博客

vue 项目的屏幕自适应方案

676人阅读  评论(0)

方案一:使用 scale-box 组件

属性:

  • width 宽度 默认 1920
  • height 高度 默认 1080
  • bgc 背景颜色 默认 "transparent"
  • delay自适应缩放防抖延迟时间(ms) 默认 100

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

npm install vue2-scale-box

或者

yarn add vue2-scale-box

使用方法:


  
  1. <template>
  2. <div>
  3. <scale-box :width="1920" :height="1080" bgc="transparent" :delay="100">
  4. <router-view />
  5. </scale-box>
  6. </div>
  7. </template>
  8. <script>
  9. import ScaleBox from "vue2-scale-box";
  10. export default {
  11. components: { ScaleBox },
  12. };
  13. </script>
  14. <style lang="scss">
  15. body {
  16. margin: 0;
  17. padding: 0;
  18. background: url( "@/assets/bg.jpg");
  19. }
  20. </style>

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

npm install vue3-scale-box

或者

yarn add vue3-scale-box

使用方法:


  
  1. <template>
  2. <ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100">
  3. <router-view />
  4. </ScaleBox>
  5. </template>
  6. <script>
  7. import ScaleBox from "vue3-scale-box";
  8. </script>
  9. <style lang="scss">
  10. body {
  11. margin: 0;
  12. padding: 0;
  13. background: url( "@/assets/bg.jpg");
  14. }
  15. </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. <template>
  2. <div>
  3. <router-view />
  4. </div>
  5. </template>
  6. <script>
  7. import devPixelRatio from "@/utils/devicePixelRatio.js";
  8. export default {
  9. created( ) {
  10. new devPixelRatio(). init(); // 初始化页面比例
  11. },
  12. };
  13. </script>
  14. <style lang="scss">
  15. body {
  16. margin: 0;
  17. padding: 0;
  18. }
  19. </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.widthwindow.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 目录平级])粘贴以下代码即可


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

转载:https://blog.csdn.net/AdminGuan/article/details/127971358
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场