利用rem实现自适应可视化大屏页面

原创 已于 2022-09-21 15:13:02 修改 · 955 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #css #html

于 2022-09-13 15:46:29 首次发布

利用rem实现自适应可视化大屏页面


众所周知，rem是根据根元素html的font-size来计算值的大小的，也就是说，我们只需要根据屏幕的宽高来自动设置html的font-size，并把所有px转换为rem就可以实现自适应功能

安装插件

amfe-flexible：npm install amfe-flexible -S // 动态设置html里面的font-size
postcss-px2rem:npm install postcss-px2rem -S // 将CSS里面的px转化成rem

安装完毕后，在main.ts里面引入

import 'amfe-flexible';

配置文件

新建一个.postcssrc.js 文件，设置相关的配置信息

"postcss-pxtorem-include": {
   
   
	include: 'src/*', // 制定转换
最低0.47元/天 解锁文章

200万优质内容无限畅学
大屏REM适配方案
Black_Kiven的博客
08-15 2229
如何使用rem适配大屏，此文章能教你一个很棒的适配方式
vue + rem + less 可视化大屏自适应适配
fang0321的博客
04-06 1401
(function(win, lib) { var doc = win.document var docEl = doc.documentElement var metaEl = doc.querySelector('meta[name="viewport"]') var flexibleEl = doc.querySelector('meta[name="flexible"]') var dpr = 0 var scale = 0 var tid .
大屏自适应rem方案
qq_41737353的博客
01-14 3463
Vue 大屏开发自适应 VScode | flexible.js | rem | echarts自适配 其实开发大屏这个适配是最费劲的，电脑的分辨率，电脑缩放比例，电脑浏览器缩放比例都很麻烦，当然了，大屏界面本来就对分辨率有些许的要求，太差劲的分辨率本来就不适用，因为毕竟要保持页面放得下，不能出现滚动条，不能遮挡啥的，我这边给的设计图是1920*1080的，所以保证在这个分辨率下面，只要附近的分辨率和缩放不出问题就差不多了。 然后，我就从网上找了个大神的博客，抄了一下，感觉还行，啊哈哈哈哈，转载一下，自己学
Vue 项目中基于 rem 布局的实现方法及大屏自适应解决方案解析
最新发布
sinat_37775891的博客
05-26 1436
本文介绍了Vue项目中实现rem布局及大屏自适应的技术方案。首先解析rem布局原理，说明rem相对于根元素字体大小的优势。其次详细讲解Vue项目中配置postcss-pxtorem插件自动转换px为rem的方法，以及动态设置根字体大小的实现步骤。针对大屏场景，提出结合rem与viewport、媒体查询断点和自定义转换函数等方案。最后提供基础组件、大屏布局和动态图表等应用实例，展示如何在实际项目中实现响应式设计。该方案能够有效解决不同屏幕尺寸下的自适应问题。
大屏自适应rem
qq_39704803的博客
05-31 366
大概原理:rem是相对根元素,因此我们只需要在根元素确定一个px或rem字号,则可以来算出元素的宽高 function bodyScale() { var devicewidth = document.documentElement.clientWidth; var scale = devicewidth / 3200; document.documentElement.style.fontSize=(devicewidth/3200).toString()+'rem
使用rem做自适应
weixin_46325225的博客
04-14 3300
1、什么是自适应 自适应区别于响应式布局最大的优点是可以适应视口宽度为任意大小的设备。 2、什么是rem rem是相对于根元素也就是html的字体大小单位，容易与em混淆，em指的是相对于父元素的字体大小，如果需要做自适应，那么应当使用rem做全局处理，而不是使用em。 3、什么是rem基准值 rem基准值就是rem与px之间的换算关系，个人习惯上喜欢设置为1rem=100px,在配置文档中设置好基准值之后，输入px单位会自动提示转换为rem单位。 4、rem的计算公式 ：设备视口宽度 / 设计稿宽度 *
可视化 大屏，自适应 rem 方法
Passerby_K的博客
12-09 1092
function rem() { let designSize = 1920; let html = document.documentElement; let wW = html.clientWidth let rem = wW / designSize * 625 $('html').css('font-size', rem + '%') } $(window).resize(function() { rem() }) rem()
前端开发Vue中rem布局与大屏自适应组件使用指南：实现高效响应式设计与性能优化
05-25
内容概要：本文详细介绍了在Vue项目中实现rem布局与大屏自适应的方法。首先，阐述了rem布局的基础使用方法，包括项目初始化配置，如安装依赖、配置postcss以及引入自适应脚本。其次，讲解了如何在组件中使用rem进行...
人在公司写Vue3，自适应可视化数据大屏被玩坏了
洋茄子炒鸡蛋的博客
04-30 3378
在当今数字化时代，数据可视化大屏已成为了展示数据、监控系统状态、传达信息的重要手段之一。Vue3和Vite作为现代化的前端技术框架，以及强大的数据可视化库ECharts，为我们构建自适应的数据大屏提供了便利。本文将介绍如何结合Vue3ViteJavaScript以及ECharts实现一个自适应的可视化数据大屏。通过本文的介绍，我们学习了如何使用Vue3ViteJavaScript和ECharts这四个工具来实现一个自适应的可视化数据大屏。我们采用了缩放（Scale。
前端开发Vue中使用rem布局解析与大屏自适应技术方案：实现高效响应式设计和性能优化
05-25
②希望优化页面性能，确保在不同分辨率下都能良好展示的应用，如数据可视化大屏、监控系统等；③学习如何结合rem布局与其他CSS布局方式，提升开发效率和用户体验。 阅读建议：本文内容较为全面，涉及多个知识点和...
rem布局解析+大屏自适应
qq_18932003的博客
02-09 566
屏幕适配 - 随笔分类 - 浮-生 - 博客园 大屏上的全屏页面的自适应适配方案 - Blog of Leon Zhang 元素高度自适应屏幕高度解决方案 - youyi2016 - 博客园
Vue 大屏项目中大屏解决方案---rem
weixin_43760238的博客
06-23 571
rem（font size of the root element）是指相对于根元素（html）的字体大小的单位 从上面可以看出现在将html的font-size 设置为 50px,那么div1的宽度就变成1乘以50 等于 5px,根元素字体大小缩小一半，div1的宽度也同样缩小一半，根据这个特性我们可以通过resize 事件去动态的线性的修改html的fontSize，那么界面上的元素就可以同比增加和缩小pubic html 入口页面中引入rem.js 然后在页面中使用rem单位 就可以实现在不同屏幕分辨
可视化大屏自适应
weixin_47521196的博客
08-01 2631
可视化大屏自适应问题解决方案
rem、em 、font-size随着屏幕大小的改变而改变
weixin_30546933的博客
11-29 819
rem 的根标签是html 以html标签上设置的font-size的值为参考点 如： <div id="app"> 　　<div id="son></div> </div> html{ font-size:20px; } #app{ 　　width :4rem; ===>4*20=80px } #son {　　widt...
WEB前端网页设计-Bootstrap 超大屏幕（Jumbotron）
君逍遥o
04-09 538
超大屏幕（Jumbotron）。顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）
vue项目采用postcss自适应屏幕
m0_49403042的博客
02-07 1312
1、安装postcss-px2rem。2、在根目录src中新建util，目录下新建rem.js等比适配文件。3、在 main.js中引入 rem.js文件。4、在vue.config.js中配置插件。
大屏适配怎么把px转rem? 来用用插件postcss-pxtorem叭~
weixin_44265146的博客
07-15 1736
配置postcss-pxtorem，可在vue.config.js、.postcssrc.js、postcss.config.js其中之一配置，权重从左到右降低，没有则新建文件，只需要设置。.config.js，将第二步vue.config.js里面的配置放在postcss.config.js中。amfe-flexible 是配置可伸缩布局方案，主要是将 1rem 设为 viewWidth/10。2.vue.config.js里面配置postcss-pxtorem。2.在main.js中引入。
vue 大屏自适应 px转rem
sun1cong2的博客
08-20 541
1 npm i lib-flexible 在main.js 中引入 import ‘lib-flexible/flexible’（也可以选择把node_modules中lib-flexible 的 flexible.js 文件单独拿出来引入静态js文件） 2 找到node_modules中lib-flexible 的flexible.js文件，修改flexible.js中的 refreshRem方法如下： 修改原始尺寸，图中是按照1920比例进行自适应 3.npm i postcss-pxtorem -
大屏适配方案（px2rem，强制分辨率，百分比布局）
Shi_haoliu的博客
08-02 2267
大屏适配方案-rem，px2rem，强制缩放比
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值