0


前端大屏自适应方案

一般后台管理页面,需要自适应的也就是大屏这一个,其他的尺寸我感觉用第三方框架继承好的就挺合适的,当然自适应方案也可以同步到所有页面,但我感觉除了 to c 的项目,不太需要所有页面自适应,毕竟都是查看和管理数据的,也没有很多花哨的东西

我这次做的大屏使用的自适应方案是 vw + rem + flex

这种方案我感觉比较万金油,整体框架使用 vw + flex,至于其中比较精确的长度和宽度以及字体大小就使用rem

vw和flex这里就不细说了,没什么好讲的,100vw就是撑满整个浏览器的宽度,flex不细说,详情可看 阮一峰flex

主要讲一下这个rem,其实rem也很简单,rem就是根据根节点的字体大小(通常是html)来计算元素的字体大小,比如现在我给html定义了字体大小,然后我给一个div定义长和宽

html {
    font-size: 20px;}

div {width: 1rem;height: 1rem;}

此时你打开控制台你就能看到 这个div的长宽都是20px

ok,那么能理解这个的情况下,如何使用rem做到自适应呢,比如ui设计图的宽度是1920 x 1080 的尺寸,现在有一个盒子长192px,也就是设计图的 1/10,如果我使用 px 单位的话会出现什么情况呢,我来逐一解答

首先,如果我仅仅使用px作为这个盒子的单位会出现什么情况:如果你的屏幕分辨率是 1920 x 1080,那么这个盒子的宽度将会占屏幕的 1/10,如果有一个物理尺寸相同的(也就是常说的24寸 27寸这种 叫物理尺寸)分辨率更高的屏幕,比如分辨率是2880 x 1620,那么这个盒子的宽度将会占屏幕的 1/15,也就是说如果你单纯使用px作为单位,在不同的分辨率的屏幕上,这个盒子的大小看上去是会有区别的,也就会和你的ui设计图有出入,原本你想占整体宽度的1/10,结果换个屏幕你可能变成了1/15 、 1/20

那么,如何解决这个问题呢,怎么可以在不同分辨率的屏幕上,达到和ui设计图一样的比例呢,那就需要rem单位了,还是以ui设计图 1920 x 1080 为例子,你想写一个div 的宽度 为 1/10 也就是192px,你可以设置 html 的font-size为192px,然后讲div 的 width 写为 1rem,接下来的问题就转变成,如何能在不同分辨率下动态修改 html的font-size 的问题

介绍两个插件

postcss-pxtoremamfe-flexible

amfe-flexible 就是上面说的动态修改html的font-size,原理就是获取当前设备的宽度(你也可以理解为分辨率),把当前设备宽度划分为10等份,动态设置html元素的字体大小为一份,比如当前分辨率 1920 那么html的font-size就是192px,如果是2560的分辨率 html的font-size就是 256px

postcss-pxtorem 这个插件就是能将你写的px转换成rem,他们结合起来就可以达到自适应的效果,还是举例说明,你拿到一份ui设计图,1920 x 1080,其中一个div宽 192,那么此时你在代码中写下了 width:192px,此时
postcss-pxtorem插件会将你的width转换成 1rem,(这里插一句,为什么我写192px就是1rem,因为这个插件可以设置,后面会说用法),转换成1rem之后,这个时候的width的具体大小就是根据 html 的font-size 变化来变化了,此时屏幕变化,amfe-flexible 能获取到当前设备的宽度,取 1/10 为 html的font-size ,这样 div 的 width就是动态,并且能保证在不同分辨率的屏幕上比例和设计图一致

下面说下这两个插件的用法,以vue举例,我这里是vue3

1.下载3个插件 amfe-flexiblepostcsspostcss-pxtorem

npminstall amfe-flexible postcss postcss-pxtorem --save

2.vite.config.js中引入

module.exports ={css:{postcss:{plugins:[postCssPxToRem({rootValue:192,propList:['*'],exclude:(e)=>{if(/src(\\|\/)views(\\|\/)echarts/.test(e)){returnfalse}returntrue}}),]}}}

rootvalue:就是之前提到,保证和ui设计图一致的 如果是1920 就写192, 2560 就写256,
propList: 是一个存储哪些将被转换的属性列表,这里设置为

['*']

全部,假设需要仅对边框进行设置,可以写

['*', '!border*']

exclude:要忽略并保留为px的文件路径,如果value是字符串,它将检查文件路径是否包含字符串。
‘exclude’ 将匹配

\project\postcss-pxtorem\exclude\path

如果value是正则,它将检查文件路径是否与regexp相匹配。

/exclude/i

将匹配

\project\postcss-pxtorem\exclude\path

如果value是function,则可以使用exclude function返回true,该文件将被忽略。
回调函数会将文件路径作为参数传递,它应该返回一个布尔结果。

function(file){return file.indexOf('exclude')!==-1;}

这里要提醒一下 postcss-pxtorem 有一个坑,就是打包后可能会失效
我这里打包是用的阿里云搭建的流水线,打包步骤就是

npminstallnpm run build 

需要添加一个

npm cache clean --force    //清除缓存

 npminstallnpm run build 
标签: 前端

本文转载自: https://blog.csdn.net/c327127960/article/details/141865158
版权归原作者 鸡汤辉 所有, 如有侵权,请联系我们删除。

“前端大屏自适应方案”的评论:

还没有评论