【推荐】用scss循环zoom缩放比例,解决可视化大屏在不同分辨率屏幕下的适配问题

方法1:

指定几种常规屏幕宽度(用这种方式就必须要强制用户全屏查看页面,在固定的宽度下才能达到比较不错的显示效果)

css 复制代码
// 适配不同分辨率的页面----------------------------------------
html {
  overflow: hidden;
  width: 1920px;
  height: 1080px;
}

$widths: 3840, 3360, 2880, 2560, 2048, 1920, 1680, 1650, 1600, 1440, 1400, 1366, 1360, 1280, 1152, 1024; //屏幕宽度
@for $i from 1 through length($widths) {
  $width: nth($widths, $i);
  @media screen and (max-width: #{$width}px) {
    html {
      zoom: $width / 1920;
    }
  }
}

方法2:

从像素1024循环到2560宽度的情况(会导致很多冗余的css代码,但是基本上所有的宽度情况都囊括了)

css 复制代码
// 适配不同分辨率的页面----------------------------------------
html {
  overflow: hidden;
  width: 1920px;
  height: 1080px;
}

@for $i from 3840 through 1024 {
  $width: $i;
  @media screen and (max-width: #{$width}px) {
    html {
      zoom: $width / 1920;
    }
  }
}
相关推荐
哆啦A梦15881 小时前
[前台小程序] 01 项目初始化
前端·vue.js·uni-app
小周同学@4 小时前
谈谈对this的理解
开发语言·前端·javascript
Wiktok4 小时前
Pyside6加载本地html文件并实现与Javascript进行通信
前端·javascript·html·pyside6
一只小风华~4 小时前
Vue:条件渲染 (Conditional Rendering)
前端·javascript·vue.js·typescript·前端框架
柯南二号4 小时前
【大前端】前端生成二维码
前端·二维码
程序员码歌4 小时前
明年35岁了,如何破局?说说心里话
android·前端·后端
博客zhu虎康5 小时前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海5 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
王源骏6 小时前
LayaAir鼠标(手指)控制相机旋转,限制角度
前端
大虾写代码6 小时前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint