最简单的大屏适配解决方案---autofit.js

这篇具有很好参考价值的文章主要介绍了最简单的大屏适配解决方案---autofit.js。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在工作开发当中,我们避免不了要去做大屏。那么做大屏其实最难的点和最核心的问题就是适配,

下面为大家介绍最好用的大屏解决方案——autofit.js。

“一行代码搞定,开袋即食!!!”

效果图展示,可根据窗口大小进行自动适配。

js 屏幕适配,javascript,开发语言,ecmascript

js 屏幕适配,javascript,开发语言,ecmascript

js 屏幕适配,javascript,开发语言,ecmascript

使用方法:

1.npm下载:

npm i autofit.js

2.项目中引入使用:

import autofit from 'autofit.js'

3.init()初始化加载:注意一定要在mounted里面使用,因为要在dom挂在完成生效!!!

  mounted() {
	autofit.init({
        designHeight: 1080,
        designWidth: 1920,
        renderDom:"#app",
        resize: true
    },false) // 可关闭控制台运行提示输出
  },

以上使用的是默认参数,可根据实际情况调整,参数分别为

   * - renderDom(可选):渲染的dom,默认是 "#app",必须使用id选择器 
   * - designWidth(可选):设计稿的宽度,默认是 1920 
   * - designHeight(可选):设计稿的高度,默认是 929 ,如果项目以全屏展示,则可以设置为1080
   * - resize(可选):是否监听resize事件,默认是 true

其他详细细节配置可取npm官网查询:

autofit.js - npm

拓展知识:

如果大家想要设备视口的全屏大屏项目可使用:DataV框架

里面提供了很多可以快速开发大屏项目的api和标签

网址:介绍 | DataV

js 屏幕适配,javascript,开发语言,ecmascript

还有一个基于echarts二次封装的网站,里面的配置的可以直接粘贴使用,也推荐给大家,要注意echarts版本和是否含有第三方插件。

Made a Pie:https://madeapie.com/#/

js 屏幕适配,javascript,开发语言,ecmascript

 最后谢谢大家,如果帮到你希望你帮我点赞,创作不易。文章来源地址https://www.toymoban.com/news/detail-714661.html

到了这里,关于最简单的大屏适配解决方案---autofit.js的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • web移动端适配有哪些解决方案?每个方案的优缺点评估

    移动端适配的解决方案主要包括以下几种: rem方案 :这是最早被广泛采用和讨论的移动端适配方案。通过在页面上使用 rem 单位来控制页面元素的大小,实现在不同尺寸的设备上保持界面展示效果的一致性。这种方案的优点在于简单易用,但缺点是对安卓的适配性可能不够好

    2024年02月21日
    浏览(49)
  • 现代 CSS 解决方案:文字颜色自动适配背景色!

    在 23 年的 CSS 新特性中,有一个非常重要的功能更新 -- 相对颜色 。 简单而言,相对颜色的功能,让我们在 CSS 中,对颜色有了更为强大的掌控能力。 其核心功能就是,让我们 能够基于一个现有颜色 A,通过一定的转换规则,快速生成我们想要的颜色 B 。 其功能能够涵盖:

    2024年02月03日
    浏览(53)
  • uniapp小程序横屏后适配问题(解决方案)

    问题一: 通常我们在小程序端切换横屏后会出现字体或宽高大小出现适配问题 解决方法 使用vmin来解决适配问题(使用rpx转换vmin) rpx与vmin的换算关系:5rpx 等价 calc(5vmin * 100 / 750)== 简单写==5rpx 等价 calc(5vmin / 7.5) 下面来看下效果(已经实现了哦) 竖屏模式下 横屏模式下 横

    2024年02月13日
    浏览(54)
  • 智慧工地解决方案,智慧工地项目管理系统源码,支持大屏端、PC端、手机端、平板端

    智慧工地解决方案依托计算机技术、物联网、云计算、大数据、人工智能、VRAR等技术相结合,为工程项目管理提供先进技术手段,构建工地现场智能监控和控制体系,弥补传统方法在监管中的缺陷,最线实现项目对人、机、料、法、环的全方位实时监控。支持多端展示(大屏

    2024年02月03日
    浏览(48)
  • 微信小程序之scroll-view自适配屏幕高度解决方案

    需求说明: 一般用于列表数据的展示(带有搜索框),根据官方文档,scroll-view需要固定一个高度,那么,对于不同的手机分辨率来说,可能显示的效果就不一样了,有的没到底,有的显示不全等等 解决方案:   不同的手机,但是可以通过计算,获取到scroll-view的填充高度。

    2024年02月12日
    浏览(59)
  • 利用Flutter和小程序容器技术打造多端适配的小程序解决方案

    随着移动互联网的快速发展,应用程序已经成为人们生活中必不可少的一部分,而小程序和Flutter技术则是当前应用开发中备受瞩目的两大趋势。 小程序是一种轻量化的应用程序,其不需要用户下载安装即可使用,同时也具备了高效便捷的使用体验。而Flutter技术则是一种跨平

    2024年02月11日
    浏览(28)
  • 数据可视化在行业解决方案中的实践应用 ——华为云Astro Canvas大屏开发研究及指南

    本文主要探讨华为云Astro Canvas在数据可视化大屏开发中的应用及效果。首先阐述Astro Canvas的基本概念、功能和特性说明,接着集中分析展示其在教育、金融、交通行业等不同领域实际应用案例;之后,详细介绍使用该工具进行大屏图表创建的开发指南和最佳实践策略,包括模

    2024年02月08日
    浏览(41)
  • 前端大屏适配几种方案

           记录一下前端大屏的几种适配方案。 我们是1920*1080的设计稿。        大屏是适配是前端开发必不可少的技能,适配各种大屏也是为了给用户更好的体验。        动态设置HTML根字体大小和body字体大小,会使用到lib-flexible.js插件 lib-flexible.js 我们可以将它下载

    2023年04月14日
    浏览(65)
  • 关于Qt适配不同分辨率和缩放率时可能遇到的问题和解决方案

    如果没有特殊的处理,Qt的UI窗口在不同的分辨率和缩放率下,其显示效果可能会出现问题,常见的有: 子控件堆叠,无法显示完整 窗口尺寸变大,超出屏幕的显示范围 控件变形,长宽比不合理 界面模糊 字体变大,控件尺寸却没有变化 有两种方式可以对UI界面进行良好的缩

    2024年02月05日
    浏览(54)
  • 【前端可视化】前端大屏适配方案

    动态设置 html 根字体的大小和 body 字体大小(使用 lib_flexible.js) 将设计稿的宽(1920)平均分成 24 等份,每一份 80px; html 根字体大小就设置为 80px,即 1rem = 80px,24rem = 1920px(移动端推荐分为 10 份); 将 body 字体大小设置为 16px; 最后需要使用插件或者其他方式将 px 转为 rem 单位:

    2024年02月11日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包