可视化大屏--响应式适配解决方案flexible.js

news2024/11/22 15:59:55

响应式适配解决方案flexible.js

最近公司开了第二个项目,是一个可视化大屏。
那么,在可视化大屏的基础上,我们肯定是要适配所有的屏幕设备,不能出现一换电脑,样式就紊乱的情况。
so,我们也不需要自己写媒体查询了,有现成的flexible.js的插件。

第一步:下载插件

我们先下载flexible.js插件(在工程化时代之前,人们都是下载的flexible.js文件,工程化之后,我们依赖npm等包管理工具进行下载)

cnpm i -S lib-flexible

第二步:修改配置文件

1.找到node_modules下的lib-flexible下的flexible.js
2.修改对应代码为以下代码
> 3.注意:
PC端: 如果UI给你的设计稿是1920分辨率下的,我们建议把屏幕划分为24等份,即1rem=80px
移动端: 如果是在移动端下,屏幕宽是750px,我们建议把屏幕划分为10等份,即1rem=75px

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        //最小适配到1024  最大适配到1920
        if (width / dpr < 1024) {
            width = 1024 * dpr;
        } else if (width / dpr > 1920) {
            width = 1920 * dpr;
        }
        //将屏幕设置为24等份  设计稿是1920下 1rem=80px
        var rem = width / 24;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

第三步:修改px to rem插件在这里插入图片描述

然后重启Vscode即可

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/31054.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

第40讲:MySQL索引的语法以及基本使用

文章目录1.索引的使用语法2.索引的基本使用2.1.准备一张数据表2.2.按照如下需求为表中的字段创建索引2.3.查看创建的索引2.4.删除索引3.验证使用索引前后的执行效率1.索引的使用语法 1&#xff09;创建索引 创建索引时&#xff0c;如果不指定索引的类型&#xff0c;默认就是常…

极简示例揭示 SwiftUI 中 @ObservedObject 与 @StateObject 状态的关键区别

问题现象 话说在 SwiftUI 中视图是状态的函数,这话一点都不假。正是秉性各异的各种状态构成了 SwiftUI 视图千变万化的功能。 这里,我们将为大家揭开其中两个常用状态,即 @ObservedObject 与 @StateObject 状态之间的最关键不同,并带领大家绕过实际使用中可能出现的坑: …

秋染田野稻菽飘香 国稻种芯·中国水稻节:河北各地农业丰收

秋染田野稻菽飘香 国稻种芯中国水稻节&#xff1a;河北各地农业丰收 河北日报 &#xff08;记者郝东伟&#xff09; 新闻中国采编网 中国新闻采编网 谋定研究中国智库网 中国农民丰收节国际贸易促进会 国稻种芯中国水稻节 中国三农智库网-功能性农业农业大健康大会报道&#x…

JavaIO流:模型

IO 的字面意思是读/写数据&#xff0c;IO 模型是读/写数据的方式。常用到的读/写数据方式有&#xff1a;同步阻塞 IO、同步非阻塞 IO、IO 多路复用、信号驱动、异步 IO &#xff5e; 本篇内容包括&#xff1a;Java IO 与 IO 模型、五种 IO 模型、三种 Java IO 模型。 文章目录一…

计算机组成原理期末复习第三章-2(唐朔飞)

计算机组成原理期末复习第三章-2&#xff08;唐朔飞&#xff09; ✨欢迎关注&#x1f5b1;点赞&#x1f380;收藏⭐留言✒ &#x1f52e;本文由京与旧铺原创&#xff0c;csdn首发&#xff01; &#x1f618;系列专栏&#xff1a;java学习 &#x1f4bb;首发时间&#xff1a;&am…

电子元器件企业面临缺货涨价,SRM协同系统助力企业采购数字化智慧升级

近年来&#xff0c;在移动互联网技术不断发展、消费电子产品制造水平提高和居民收入水平增加等因素的驱动下&#xff0c;电子元器件行业呈现蓬勃发展的态势。未来随着5G、物联网、人工智能、虚拟现实、新型显示等新兴技术与消费电子产品的融合&#xff0c;这会使得行业需求量持…

linux进程间通信-FIFO,让你全方位理解

有名管道(FIFO) 有名管道也被称为FIFO文件&#xff0c;是一种特殊的文件。由于linux所有的事物都可以被视为文件&#xff0c;所以对有名管道的使用也就变得与文件操作非常统一。 (1)创建有名管道 用如下两个函数中的其中一个&#xff0c;可以创建有名管道。 #include #include …

python项目上线

python项目上线一 购买服务器二 使用MobaXterm连接服务器三 上线图四 安装git五 安装mysql六 安装redis七 安装python八 安装uwsgi九 安装虚拟环境十 安装nginx十一 前端部署十二 后端部署12.1 git拉取代码&#xff0c;安装依赖12.2 配置数据库12.3 迁移数据库12.4 使用uwsgi启…

作为微软开发者官方号,我们又要做点特别的事情了

在“感谢”二字最容易说出口的日子 谢谢每一个你&#xff0c;像一颗颗星星一样 点亮 MSDN 微软开发者社区的技术宇宙 我们也将在这个最值得感谢的日子 做一点特别的事情 MSDN 到底什么来头&#xff1f; MSDN 微软开发者社区已经成立快10年了&#xff0c;相信有很多资深开发…

Android服务器的通信方式

目录 一.HTTP协议 1.简介 2.Get和Post的使用 1.Get请求 2.Post请求 3.Get请求和Post请求的区别 二.Socket Socket的使用类型主要有两种&#xff1a; 客户端&#xff1a; 三.Socket 与 Http 对比 Android与服务器的通信方式主要有两种&#xff0c;一是Http通信&#xf…

Docker安装Gitlab-ruuner

第一步 # 拉取镜像 docker pull gitlab/gitlab-runner:latest # 启动容器 docker run -d --name gitlab-runner --restart always -v /opt/gitlab-runner/config:/etc/gitlab-runner -v /var/run/docker.sock:/var/run/docker.sock gitlab/gitlab-runner:latest 第二步 查看/…

Windows 上修改 docker 的镜像文件存储位置(修改 WSL 文件映射)

Windows 上修改 docker 的镜像文件存储位置&#xff08;修改 WSL 文件映射&#xff09;1、起因2、修改2.1 关闭 Docker Desktop2.2 备份镜像2.3 WSL 取消注册 docker-desktop-data2.4 镜像数据导回 WSL 并挂载到新路径3、验证1、起因 一开始在 Windows 上安装了 docker 后&…

运动用品品牌排行榜,2022年值得买的运动用品推荐

如今&#xff0c;人们的生活节奏越来越快&#xff0c;工作和生活压力大。因此&#xff0c;人们越来越重视体育运动&#xff0c;通过体育运动达到放松和锻炼身体的目的&#xff0c;运动装备也就跟着火热起来。无论是进行室内或户外活动&#xff0c;选一套合适的运动装备是很有必…

【java】java 类型安全 与 unchecked warning

1.概述 1.1. What does type-safety mean? 我的总结: 从概念上来说,Type Safety,最本质上,就是对于内存(Memory)的“正确访问”。假如说,在内存的一块区域上存储着一个String类型的对象;按照正常的逻辑,这块内存区域就应该被当作String来进行处理,这就是所谓的“…

MASA Framework 事件总线 - 进程内事件总线

概述 事件总线是一种事件发布/订阅结构&#xff0c;通过发布订阅模式可以解耦不同架构层级&#xff0c;同样它也可以来解决业务之间的耦合&#xff0c;它有以下优点 松耦合横切关注点可测试性事件驱动 发布订阅模式 通过下图我们可以快速了解发布订阅模式的本质 订阅者将自…

nginx简单学习笔记

目录什么是nginx&#xff1f;反向代理负载均衡动静分离安装nginxNginx常用命令nginx.conf配置文件1、位置2 nginx配置文件组成Nginx 反向代理实例Nginx 配置实例-负载均衡nginx 分配服务器策略Nginx配置实例-动静分离nginx原理什么是nginx&#xff1f; Nginx是一个高性能的 HT…

【附源码】计算机毕业设计JAVA医院住院综合服务管理系统

【附源码】计算机毕业设计JAVA医院住院综合服务管理系统 目运行 环境项配置&#xff1a; Jdk1.8 Tomcat8.5 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; …

第五站:操作符(第一幕)

操作符相关的知识&#xff0c;在我们初识C语言&#xff08;第三幕&#xff09;这篇文章中其实已经讲到过了。但是那一次讲解仅仅只是一些粗略的知识讲解&#xff0c;我们在那里面已经提到过&#xff0c;后续会专门超级详细的讲解操作符的知识&#xff0c;我们现在就来攻下操作符…

2022亚太数学杯数学建模竞赛B题(思路、程序......)

&#x1f352;&#x1f352;&#x1f352;欢迎关注&#x1f308;&#x1f308;&#x1f308; &#x1f4dd;个人主页&#xff1a;我爱Matlab &#x1f44d;点赞➕评论➕收藏 养成习惯&#xff08;一键三连&#xff09;&#x1f33b;&#x1f33b;&#x1f33b; &#x1f34c;希…

C妈妈加密返回值逆向分析

内容仅供参考学习 目标 网址&#xff1a;https://www.chanmama.com/promotionDetail/0IHXaJ1y7lRNaZyiTsKa6vHtvaZDe6zy/live 直播记录接口返回值加密 分析 打开调试工具&#xff0c;先截获一个请求&#xff1a; 进入Initiator 一般情况通过这边进入函数中挨着…