首页 > 其他分享 >前端大屏尺寸实现自适应屏幕大小

前端大屏尺寸实现自适应屏幕大小

时间:2024-03-12 09:46:36浏览次数:34  
标签:px2rem 适配 前端 rem 大屏 屏幕 postcss

说在前面

目前很多业主在使用系统的时候都会有大屏的需求,很多屏幕并不会像我们开发的屏幕一样标准,比如1920*1080,这样我们就需要根据业主的屏幕尺寸进行适配,避免一些图表或文字在大屏中出现偏移,影响视觉观感。

方案比选

方案一:

如果希望在大屏中实现最佳的展示效果,应该由设计人员针对大屏的尺寸进行单独设计,然后开发人员使用如下监听方式:

@media screen and (max-width: 2560px) {}
@media screen and (min-width: 2561px) {}
  • 1
  • 2

2561px分界线,在屏幕尺寸大于分界线时来让不同的样式代码生效。
这种方案可以保证最好的展示效果,完美适配大屏,问题就是如果屏幕发生变化,或者需要适配其他尺寸的屏幕时,需要针对性的进行调整。

方案二:

使用vw和vh属性来表示dom节点的长宽。
举个例子:我们手里的设计稿是1920*1080,此时使用vwvh,这样就可以适配大屏。
比如某个dom节点宽度为200px,高度为100px,此时设置他的宽高为:

.dom {
    width: (200 / 1920) * 100vw;
    height: (100 / 1080) * 100vh;
}
  • 1
  • 2
  • 3
  • 4

原理也比较简单,对所有dom节点的宽高根据屏幕大小进行等比缩放,这样做的麻烦点是,代码中会有很多涉及到需要px单位的地方,每一处都需要写成这种形式,从操作上烦琐了不少。

方案三:

使用rem来实现响应式的布局,rem是相对于根元素的字体大小来计算的单位,配合引入相应的postcss相关插件,免去了设计稿中的px到rem的计算。
引入:postcss-plugin-px2rem,还有很多其他类似插件或者loader,引入一个即可。

.dom {
    width: 200px;
    height: 100px;
}
编译以后的代码为:
.dom {
	width: ..rem;
	height: ..rem;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

这样做的优势就是可以安全按照设计稿给出的尺寸来完成css布局,不需要操心转换等问题。

使用过程中的一些小坑

一些echarts图表是独立设置尺寸的

echarts总的大小会根据容器的大小调整,但是字体,间距等需要在代码中设置大小。
由于postcss-plugin-px2rem只能检测到css文件中的样式,所以需要单独处理,方案也比较简单,选中宽或者高为参考,进行等比缩放即可。

getSize(size) { // 这里是以高度为参考进行等比缩放
    return size * (window.innerHeight / 1080);
},
...ehcart legend的设置片段
legend: {
    orient: "vertical",
    bottom: "10%",
    left: "center",
    itemGap: this.getSize(10),
    itemWidth: this.getSize(8),
    itemHeight: this.getSize(8),
    itemStyle: {
        radius: 5,
    },
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
选择宽度或者高度作为最佳参考标准

rem的方案是需要选择宽度或者高度为参考的,如果大屏宽高较原稿变化不大可随意选择,如果变化偏大,需要分别设置宽和高为基准,比较哪种更适合屏幕的尺寸。

// rem.js
// rem等比适配配置文件
// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem () {
// 当前页面宽度相对于 1920宽的缩放比例,可根据自己需要修改。
    const scale = document.documentElement.clientHeight/ 1080
// 设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,可根据实际业务需求调整)
    document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem()
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

如上述代码,是以高度为参考基准的。

浏览器显示最小字体为12px

这里在适配小屏幕的时候会遇到问题,比如业主要求需要适配他们的平板,此时你可能会发现小屏幕下会有字体重叠的情况出现,这是因为浏览器支持的最小字体为12px,此时需要根据实际小屏幕尺寸调整一下页面的布局。

全局转换可能导致意想不到的问题

这种情况下,我们就只需要转换我们需要的代码,以文件夹为基准。实现方式不同插件有些许差异,下面举几个例子,实际情况请参考官方 https://www.npmjs.com/package/package
如果你用的是 postcss-plugin-px2rem,可以像下面的例子中一样使用exclude属性。
但如果你使用的是postcss-px2rem,那不好意思,你是用不了这个属性的,但是如果你仔细查看,他是有可以使用属性的版本的。
在这里插入图片描述

rem实现分享

安装依赖并在配置文件中引入

npm i postcss-plugin-px2rem --save -dev

在vue.config.js中添加配置信息
module.exports = {
    //px转rem的配置(postcss-plugin-px2rem插件)
    lintOnSave: true,
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-plugin-px2rem')({
                        exclude: /(node_module)/,  //默认false,可以(reg)利用正则表达式
                        mediaQuery: false,  //(布尔值)允许在媒体查询中转换px。
                        minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
                    }),
                ]
            }
        }
    },
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

还有更多的配置项,详情参考官方 https://www.npmjs.com/package/postcss-plugin-px2rem

新建rem.js文件

内容参考上方 选择宽度或者高度作为最佳参考标准 代码。

在main.js中引入

import './utils/rem';
加载以后会调用setRem()方法来触发尺寸的初始化。

说到最后

为了实现最佳的效果,以上几种方案甚至可以组合使用,希望大家读完文章后能理解并动手实践大屏适配。

标签:px2rem,适配,前端,rem,大屏,屏幕,postcss
From: https://www.cnblogs.com/mounterLove/p/18066442

相关文章

  • 解决一次前端渲染时,把字符串原有空格去掉的问题
    问题回顾:前端在渲染时,会自动把字符串的空格忽略掉: 百度了下,全都是用js把原字符的空格去掉,但这并不是我想要的 解决方式:在偿试查阅资料后,发现新大陆,原来只要在对面的元素加上css样式即可:style="white-space:pre;" ......
  • 16条前端 UI 设计原则
    以一个卡片为例子,逐一按照规则进行优化,左边是原图,右边是经过优化后的设计。规则使用间距对相关元素进行分组一致性确保功能相似外观也相似清晰的视觉层次移除不必要的样式有目的的使用颜色确保界面元素的对比度为3:1确保文本的对比度为4.5:1不要仅仅使用颜色作为指标......
  • 2024新版Axure RP大数据可视化大屏模板68套及通用组件+PSD文件
    AxureRP数据可视化大屏模板及通用组件库2024新版重新制作了这套新的数据可视化大屏模板及通用组件库V2版。新版本相比于V1版内容更加丰富和全面,但依然秉承“敏捷易用”的制作理念,这套作品也同样延续着我们对细节的完美追求,整个设计制作过程我们同样投入了大量的精力。作品制作前......
  • 前端发展趋势与 ViewDesign 的崛起
    前端发展的新时代近年来,随着Web技术的不断发展,前端已经不再是简单的展示层,而是日益成为复杂的应用程序。传统的前端开发模式已经无法满足现代Web应用的需求,因此出现了一系列新的前端框架和工具。其中,Vue.js因其轻量级、高性能和易于上手等优势,成为了前端开发领域中的......
  • vue前端获取/切换麦克风、播放采集音频和采集音量大小完整代码
    1、创建Vue项目在终端运行npminstallelement-uinpminstallrecordrtc2、案例图示 3、代码1、获取麦克风列表if(navigator.mediaDevices&&navigator.mediaDevices.getUserMedia){varMic=[]//弹框获取麦克风navigator.mediaDevices.getUserMedia({a......
  • Android 《屏幕切换》
    默认处理机制除了系统广播之外,App所处的环境也会影响运行,比如手机有竖屏与横屏两种模式,竖屏时水平方向较短而垂直方向较长,横屏时水平方向较长而垂直方向较短。两种屏幕方向不但造成App界面的展示差异,而且竖屏和横屏切换之际,甚至会打乱App的生命周期。无需重启Activity横竖屏......
  • JeecgBoot Vue3前端项目性能优化&按需加载方案
    JeecgBootvue3前端项目在3.5.5版本之前,的确存在很严重的性能问题,大家可以参考以下文档进行升级。按需加载改造方法1、全局注册地方去掉2、组件改成异步注册3、用不到的大组件可以删掉【精简项目方案】大组件1、富文本tinyme2、Markdown3、CodeMirror4、地图数据......
  • 前端拖拽
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><sty......
  • 走进前端工程化
    虽然前端工程化的概念兴起还没几年的时间,但是对于“工程化”这个词并不是一个新鲜词了,在其他软件开发的领域很早就已经有了高度的工程化,例如Web服务端开发。只不过那个时候,前端工程师并没有工程化的意识,也没有必要对前端进行工程化的操作,毕竟在那个时期,前端的开发工作只能算......
  • 前端基础
    【一】什么是前端【1】什么是前端任何与用户直接打交道的操作界面都可以称之为前端比如电脑界面、手机界面、平板界面【2】什么是后端不直接与用户打交道的用于执行真正业务逻辑的代码比如C代码,Java代码,Python代码【3】前端基础【二】Web服务器【1】在浏览器......