精华内容
下载资源
问答
  • 大屏分辨率适配
    千次阅读
    2019-11-28 11:05:27

    一、大屏项目屏幕分辨率适配:1366*768 和 1920*1080 和 2560*1440 和 4096×2160

    二、css方案选择:css的宽高以什么为单位?

    1、字体大小以 “相对单位rem” 为单位更合适(以 1920*1080 的设计稿为基本尺寸设置 rem 值)(字体相对单位)

    2、大的布局的宽高以 “相对单位vh,vw” 为单位更合适(视窗相对单位,高宽占满)

    3、内容的布局使用%,display:flex 更合适

    4、实在需要单个调整的,媒体查询更合适

    转载于:https://www.cnblogs.com/heroljy/p/11157670.html

    更多相关内容
  • 数据大屏项目,需要适配不同屏幕,且在任意屏幕下保持16:9的比例,保持显示效果一致,屏幕比例不一致两边留黑即可

    背景

    数据大屏项目,需要适配不同屏幕,且在任意屏幕下保持16:9的比例,保持显示效果一致,屏幕比例不一致两边留黑即可

    分析

     不同屏幕宽高比例(和设计稿16:9)相比会有两种情况:

    1、更宽:(window.innerWidth / window.innerHeight) > 16/9 ,以高度为基准,去适配宽度

    2、更高:(window.innerWidth / window.innerHeight) < 16/9 ,以宽度为基准,去适配高度

    选择方案:

    计算需要缩放的比例,利用transform的scale属性缩放即可

    为什么不用px->rem或媒体查询?

    因为用rem起来太麻烦了;媒体查询代码大量书写 比较繁琐;而且echarts里面的东西不好适配

    使用transform可以完全按照设计稿的尺寸去开发,缩放的是整个页面

    效果预览-更高

     

    效果预览-更宽

    实现代码

     新建resizeMixin.js

    // * 默认缩放值
    const scale = {
      width: '1',
      height: '1',
    };
    
    // * 设计稿尺寸(px)
    const baseWidth = 1920;
    const baseHeight = 1080;
    
    // * 需保持的比例(默认16:9)
    const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));
    
    export default {
      data() {
        return {
          drawTiming: null,
        };
      },
      mounted() {
        this.calcRate();
        window.addEventListener('resize', this.resize);
      },
      beforeDestroy() {
        window.removeEventListener('resize', this.resize);
      },
      methods: {
        calcRate() {
          const appRef = this.$refs['appRef'];
          if (!appRef) return;
          // 当前宽高比
          const currentRate = parseFloat(
            (window.innerWidth / window.innerHeight).toFixed(5)
          );
          if (appRef) {
            if (currentRate > baseProportion) {
              // 表示更宽
              scale.width = (
                (window.innerHeight * baseProportion) /
                baseWidth
              ).toFixed(5);
              scale.height = (window.innerHeight / baseHeight).toFixed(5);
              appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
            } else {
              // 表示更高
              scale.height = (
                window.innerWidth /
                baseProportion /
                baseHeight
              ).toFixed(5);
              scale.width = (window.innerWidth / baseWidth).toFixed(5);
              appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
            }
          }
        },
        resize() {
          clearTimeout(this.drawTiming);
          this.drawTiming = setTimeout(() => {
            this.calcRate();
          }, 200);
        },
      },
    };
    

     在app的路由下使用,body背景设置成黑色即可

    <template>
      <div  ref="appRef">
        <router-view />
      </div>
    </template>
    
    <script>
    import resizeMixin from '@/utils/resizeMixin ';
    
    export default {
      mixins: [resizeMixin]
    }

    展开全文
  • 数据可视化大屏 前端屏幕自动适配方案 写在前面: 第一次写博客, csdn账号注册很久了, 应该是2010年注册的, 当时我还在上高中, 当时还在写易语言的, 有些问题搞不懂的会来csdn看大佬是怎么解决的, 也写了些没什么用...

    数据可视化大屏 前端屏幕多分辨率适配方案(vue)


    写在前面:
    第一次写博客, csdn账号注册很久了, 应该是2010年注册的, 当时我还在上高中, 当时还在写易语言的, 有些问题搞不懂的会来csdn看大佬是怎么解决的, 也写了些没什么用的小工具上传到csdn, 当然现在都在用git了. 很多人好奇, " 你为什么要学易语言, 垃圾语言 " , 当时是实在看不懂英语, 但是对编程(当时的理解就是编程)很有兴趣, 非常想学.
    现在回想从 c语言 易语言 vb javascript java python , 一路过来都在学习, 但是好像从来没有写过什么东西, 遇到过无数的bug, 掉了无数根头发, 现在大学毕业了, 赶上了2020年的疫情, 这次经历让我对生命有了新的看法, 也是时候静下心来写些东西, 沉淀一下自己的历程了! 第一次写博客不知道写什么, 胡乱写了这么一段, 留在这里, 反正也没有人看, 回头再看到自己第一篇博客的时候, 希望不忘初心!

    项目代码链接: gitee 代码链接

    一直在写 react 的, 新到一家公司, 同事都是写 vue , 改写 vue 不太习惯, 觉得还是 react 用起来更灵活更顺手一些. 好久没写前端了, 现在也回忆一下前端适配, 也回忆一下 vue 的写法

    项目有一个数据可视化大屏的需求, 要展示一些数字资源的使用情况,里面有一些 echarts 的图表,使用量一般是用仪表盘的形式,使用情况是一段时间数据的柱状图.
    数据大屏
    在这里插入图片描述

    这个项目是由我同事来写的, 他的习惯是直接按照设计稿的px像素直接写到页面上, 在电脑上预览的时候没有什么问题, 但是这个项目要部署在一块很大的大屏上的, 这个时候就发现了问题所在, 屏幕不适配!!!
    在这里插入图片描述

    我也是刚来到这个公司和那个同事关系比较好, 我的工作也基本完成了, 所以我决定帮帮他. 选择一个合适的适配方案然后还需要快速的把代码完成改版, 最终我用java写了一个代码转换工具, 一键帮同事把代码转为适配

    方案选择

    1. px 转 rem
    2. viewpoint
    3. 媒体查询 @media
    4. 计算屏幕缩放比 动态设置像素值

    每个人有不同的适配经验, 我这个同事适配经验比较少, 之前写小程序适配是用的 rpx , 这个类似于 rem 了.


    备选方案1: px转rem

    px 转 rem 是基于页面的fontSize 设置一个 rempx 换算比例 比如 16px=1rem , 20px=1rem 根据不同的屏幕设计不同的, 页面fontSize, 在移动端开发中这种方案非常常见.

    html { /* 普通状态 */
    	font-size: 20px
    }
    html { /* 1.5倍分辨率 */
    	font-size: 30px
    }
    html { /* 2倍分辨率 */
    	font-size: 40px
    }
    .div-box {
    	width: 5rem; /* 5倍的font-size 普通状态下 = 100px */
    }
    

    但是当前的项目可能并不适用:

    1. 页面中有其他已经开发有其他的元素有导航文字, 设置fontSize时会影响到页面中已经写好的内容
    2. 页面中使用了 echarts 图表, 里面的参数没办法应用 rem 的比例

    备选方案2: 媒体查询

    媒体查询是比较常见的屏幕适配方案了, 可以根据不同的屏幕大小提供不同的样式方案, 媒体查询可以很好的支持多数的pc端网页布局需要了.

    @media only screen and (max-width: 1000px) {
        .div-class {
            width: 720px;
        }
    }
    

    但是问题也是比较明显:

    1. 大量书写媒体查询代码, 比较繁琐
    2. 针对多种屏幕进行适配, 也无法保证完全兼容所有的屏幕
    3. 也无法支持 echarts 图表中的参数进行适配

    备选方案3: viewpoint 视口

    viewpoint 基本是目前多数移动端开发都会使用的适配方式, 可以设置对移动端设备的的界面进行整体的缩放, 这种方式的适配是最佳的方案. 但是缺点是很明显的, 只能在移动端进行 viewpoint 适配, 我们目前的数据大屏项目就没办法用了.

    <meta name="viewport" content="target-densitydpi=high-dpi" />
    

    ## 最终采用方案: 计算屏幕缩放比 我们的设计稿宽高比是 `1920 * 960` 由于这个数据可视化的项目是适配宽屏的, 我可以先铺满高然后屏幕左右可能会有空白, 空白的部分用背景图片填充就好了. 画面的布局像素依然使用设计标注的像素值然后再乘屏幕缩放比.

    页面适配样例代码(vue) :

    <template>
    	<div class="chart-container" :class="chartContainer">
    		<div :style="[{width:202*rate+'px',height:184*rate+'px',marginLeft:134*rate+'px',marginTop:40*rate+'px',}]">
    		</div>
    	</div>
    </template>
    
    <script>
      // 宽高比
      const scale = 1920 / 960; 
      // 屏幕导航高度
      const headerHeight = 47; 
      // 标签栏高度
      const tabHeight = 27; 
      // 标签栏间隔
      const pageMargin = 5; 
      // 设计稿高度
      const designHeight = 960; 
      // 画面上方间隔高度
      const marginTop = headerHeight + tabHeight + pageMargin;
      // 画布下方间隔高度
      const marginBottom = pageMargin;
      // 页面宽度
      const clientWidth = document.body.clientWidth;
      // 页面高度
      const windowHeight = document.body.clientHeight;
      // 面试高度去年 上方间隔 下方间隔
      const clientHeight = windowHeight - marginTop - marginBottom;
      // 画面高度
      const innerHeight = clientHeight;
      // 缩放比率
      const rate = innerHeight / designHeight;
      // 画面宽度
      const centerWidth = clientHeight * scale;
      // 画面左右侧空白宽度
      const paddingWidth = (((clientWidth - pageMargin - pageMargin) - (clientHeight * scale)) / 2)
      export default{
    	data:()=>({
    		chartContainer: {height: 181 * rate + 'px',},
    	}),
    	methods:{
    		dataOtherEChart (eleId, label, value, itemValue, color, color1, temp3) {
            const _self = this;
            let chartEle = _self.$echarts.init(document.getElementById(eleId));
            let option = {
              title: {
                textAlign: 'center',
                textStyle: {
                  rich: { num: { fontSize: 25 * rate,}, key: { fontSize: 15 * rate,}}
                },
                subtextStyle: { lineHeight: 30 * rate, fontSize: 15 * rate
                }
              }
            };
            chartEle.setOption(option, true);
          },
    	}
    }
    </script>
    

    ## 改造前代码 有些是写在行内的 `style` ```html
    ``` 高度直接使用了设计稿中的像素值 `165px`

    有些是使用了css 样式定义的:

      .box-to-box{
        height: 100px;
        width: 85%;
        margin-top: 49px;
        margin-left: 60px;
        display: flex;
      }
    

    把高度 间距 都设计成了设计稿里面的像素值, 他好像还不太会用flex 弹性盒布局, 这里的 display:flex 也没有生效

    echarts 参数:

    let option = {
              title: {
                subtextStyle: { lineHeight: 30, fontSize: 15 }
              },
            }}
    

    这里的参数是没有单位的也需要按缩放比缩放

    vue 代码转换工具

    用代码转换工具将写死的像素值乘以缩放比例
    gitee 代码连接

    1.读取vue文件, 定义文件行链表 class的映射

    	fileReader = new FileReader(url);
    	// 读取文件
    	bufferedReader = new BufferedReader(fileReader);
    	
    	// 结果文本
        StringBuilder resultText = new StringBuilder();
    
    	// 行链表 用于查找 class样式名称
    	LinkedList<String> lineList = new LinkedList<>();
    	// class样式映射
    	Map<String, Map<String, String>> classMap = new HashMap<>();
    

    2.遍历行, 定义样式识别的正则表达式

    	// 每行插入链表头
    	lineList.addFirst(line);
    	// class样式 识别正则
    	Matcher classMatcher = Pattern.compile(".*?-?.*?:.*?px.*?;").matcher(line);
    	// id class 绑定样式 识别正则
    	Matcher classUseMatcher = Pattern.compile("(class|id)=\"([0-9a-z-])*?\"").matcher(line);
    

    3.处理style 有px的位置乘以 rate

    	if (line.contains("style=\"")) { // 处理style
    		// 行文本头部加入结果文本
    		resultText.append(line, 0, line.indexOf("style=\""));
    		// style 代码正则
    		Pattern pattern = Pattern.compile("style=\".*?\"");
    		Matcher matcher = pattern.matcher(line);
    		// 将 style="name:value;"  转为 :style="[{name:value}]"
    		resultText.append(":style=\"");
    		while (matcher.find()) {
    		    String styleStr = matcher.group();
    		    styleStr = styleStr.replace("style=\"", "").replace("\"", "");
    		    resultText.append(parseStyleList(styleStr));
    		}
    		resultText.append("\"");
    		String[] tailArr = pattern.split(line);
    		// 行文本尾部 加入结果文本
    		if (tailArr.length != 0 && tailArr.length > 1) {
    		    resultText.append(tailArr[1]);
    		}
    	}
    

    4.处理class样式 class 样式表转为 hashMap 有px乘以 rate

    if (classMatcher.find()) { // 处理class样式
        // 遍历查找 class 名称
        for (String classNameLine : lineList) {
            // 查询  .class-name #id-name 样式定义 不支持 tag-name
            if (classNameLine.contains("{") && (classNameLine.contains(".") || classNameLine.contains("#"))) {
                String className = classNameLine.trim().replace(".", "").replace("#", "").replace("{", "");
                // 横线转驼峰
                className = lineToHump(className);
                // 如果是多重定义的class 只保留一个
                if (className.contains(" ")) {
                    className = className.split(" ")[0];
                }
                // 处理样式键值对
                String styleStr = classMatcher.group().trim().replace(";", "");
                String[] styleArr = parseStyle(styleStr).replace(",", "").split(":");
                // class 键值对映射
                Map<String, String> innerClassMap = classMap.get(className);
                if (innerClassMap == null) {
                    innerClassMap = new HashMap<>();
                }
                // class 键值对映射加入 class样式映射
                innerClassMap.put(styleArr[0], styleArr[1]);
                classMap.put(className, innerClassMap);
                break;
            }
        }
    }
    

    5.使用 class="class-name" 的地方 加入 :class="className"

    if (classUseMatcher.find()) {
        String classUseStr = classUseMatcher.group();
        String classUseHumpStr = lineToHump(classUseStr.replace("class=", "").replace("id=", "").replaceAll("\"", ""));
        // 行文本头部加入结果文本
        resultText.append(line, 0, line.indexOf(classUseStr));
        resultText.append(classUseStr);
        resultText.append(" :class=\"");
        // class 转 v-bind:class 横线命名转驼峰
        resultText.append(classUseHumpStr);
        resultText.append("\"");
        // 行文本尾部加入结果文本
        resultText.append(line, line.indexOf(classUseStr) + classUseStr.length(), line.length());
    }
    

    6.vue data中加入 缩放比率 rate 组件中 有 rate 会自动缩放

    	StringBuffer dataBuffer = new StringBuffer();
    	Matcher dataMatcher = Pattern.compile("data.*?\n.*?return.*?\\{", Pattern.MULTILINE).matcher(resultText);
    	if (dataMatcher.find()) {
    	    dataMatcher.appendReplacement(dataBuffer, "data: function () {\n" +
    	            "      return {\n" +
    	            "        rate,\n");
    	    for (String key : classMap.keySet()) {
    	        Map<String, String> innerClassMap = classMap.get(key);
    	        dataBuffer.append("        ");
    	        dataBuffer.append(key);
    	        dataBuffer.append(": {");
    	        for (String innerKey : innerClassMap.keySet()) {
    	            dataBuffer.append(innerKey);
    	            dataBuffer.append(": ");
    	            dataBuffer.append(innerClassMap.get(innerKey));
    	            dataBuffer.append(",");
    	        }
    	//                    stringBuffer.append("        ");
    	        dataBuffer.append("},\n");
    	    }
    	}
    	dataMatcher.appendTail(dataBuffer);
    	resultText = new StringBuilder(dataBuffer);
    

    7.常量加入script中

    String rateDefineStr = "\n" +
    	       "  const scale = 16 / 9\n" +
    	       "  const headerHeight = 47;\n" +
    	       "  const tabHeight = 27;\n" +
    	       "  const tabPadding = 5;\n" +
    	       "  const designHeight=1080;\n" +
    	       "  const marginTop = headerHeight + tabHeight + tabPadding;\n" +
    	       "  const marginBottom = tabPadding;\n" +
    	       "  const clientWidth = document.body.clientWidth\n" +
    	       "  const windowHeight = document.body.clientHeight;\n" +
    	       "  const clientHeight = windowHeight - marginTop - marginBottom;\n" +
    	       "  const innerHeight = clientHeight;\n" +
    	       "  const rate = innerHeight / designHeight\n" +
    	       "  const centerWidth = clientHeight * scale;\n" +
    	       "  const paddingWidth = (((clientWidth - 5 - 5) - (clientHeight * scale)) / 2);" +
    	       "\n  ;\n";
    	StringBuffer constBuffer = new StringBuffer();
    	Matcher constMatcher = Pattern.compile("export default \\{", Pattern.MULTILINE).matcher(resultText);
    	
    	if (constMatcher.find()) {
    	   constMatcher.appendReplacement(constBuffer, rateDefineStr);
    	   constBuffer.append("  export default {");
    	   constMatcher.appendTail(constBuffer);
    	   System.out.println(constBuffer);
    	}
    

    8.ecahrts 中的参数可以乘以 rate 常量

    let option = {
      title: {
        subtextStyle: { lineHeight: 30 * rate , fontSize: 15 * rate }
      },
    }}
    


    代码中有些设计没有解释, 太晚了准备睡觉, 后续有空会再更新博客, 做一些思路上面的分享, 如果有遇到同样问题或者有疑问的朋友可以联系我, 这是我的第一篇博客中存在的问题也感谢大家能够指正.

    展开全文
  • 我们在做大屏的时候经常在开发环境开发的时候显示很完美,但是到了客户电脑就花样百出,出去浏览器对CSS3和js语言新特性的兼容问题,其实大多是因为网页的缩放比,或者用户的高分屏的一些设置问题,如图通常这样设置...

    我们在做大屏的时候经常在开发环境开发的时候显示很完美,但是到了客户电脑就花样百出,出去浏览器对CSS3和js语言新特性的兼容问题,其实大多是因为网页的缩放比,或者用户的高分屏的一些设置问题,如图

    v2-90c7d3d8c05bdd9237f62e107ce26a93_b.jpg

    通常这样设置没有问题,但是有些笔记本高分屏,默认缩放比就是125%.这样可能原来1920的大屏显示在1536宽度的屏幕上肯定会出现问题。

    首先我们我们可以通过js获取当前的显示器的尺寸

    v2-3d094c6d6c007e205b0d871ab00cbe97_b.jpg

    width、height、就是当前的显示器在当前分辨率下的尺寸,availWidth、availHeight是可使用尺寸(一般是去除工具栏的尺寸)

    接着

    window.outerHeight;//浏览器外框宽
    window.outerWidth;//浏览器外框高
    window.innerWidth;//浏览器内框宽(通常是和外框宽一致,开启F12时候,去除开发者工具占的空间)
    window.innerHeight;//浏览器内框高(去除标签栏,地址栏,收藏夹栏等等)
    

    动态获取浏览器缩放

    function detectZoom (){ 
      var ratio = 0,
        screen = window.screen,
        ua = navigator.userAgent.toLowerCase();
     
       if (window.devicePixelRatio !== undefined) {
          ratio = window.devicePixelRatio;
      }
      else if (~ua.indexOf('msie')) {  
        if (screen.deviceXDPI && screen.logicalXDPI) {
          ratio = screen.deviceXDPI / screen.logicalXDPI;
        }
      }
      else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
        ratio = window.outerWidth / window.innerWidth;
      }
       if (ratio){
        ratio = Math.round(ratio * 100);
      }
       return ratio;
    };

    到此我们拿到的是全屏时候的一个真实外框与内框的比,这个比的倒数n就是要设置容器的transform:scale(n);

    展开全文
  • 大屏分辨率宽度只有960px,也就是导致大屏的1rem=5px,页面乱了套。 这个js方法如果要实现适配,需要获取的是屏幕实际宽度而不是分辨率,不知道为何网上都是这套方案,还是...
  • vue 不是常用分辨率的前端大屏适配 最近公司有个需求,需要在一块1920X1620的大屏上全屏做一个可视化页面,设计稿也是按照1920X1620做的,但是投屏电脑的分辨率是1920X1080,且自定义电脑分辨率投屏大屏不支持投放,...
  • 分辨率适配

    2019-10-15 15:42:06
    1.屏幕分辨率 一般描述成屏幕的"宽x高”=AxB 通过如下adb命令行查看 ➜ ~ adb shell generic_x86:/ $ wm size Physical size: 720x1280 2.屏幕密度 ➜ ~ adb shell 255|generic_x86:/ $ wm density Physical ...
  • Android不同分辨率适配

    2021-05-27 01:19:31
    二、Android不同分辨率屏幕的适配做法小结 1.尽可能使用dp,字体使用sp。 这里注意的是,textview控件,利用代码创建出来的的时候,setext(float textsize);这个textsize设进去会转换为sp,所以不要转换了。 ...
  • 大屏数据可视化——屏幕适配方案(多分辨率下)

    万次阅读 多人点赞 2020-11-10 16:53:20
    文章目录前言常见大屏分辨率适配痛点关于rem关于px2rem适配方案一、rem自适应缩放二、css3缩放scale 前言 基于现目前所做数据可视化项目的不同分辨率兼容需求总结以下适配几种方案供参考。 通常而言数字大屏指的是...
  • vue屏幕分辨率适配实战解析

    千次阅读 2021-08-15 22:08:54
    作为前端人员,为了适配各种型号的电脑、手机,我们往往离不开屏幕分辨率适配; 那么如何做好屏幕分辩率的适配呢,我总结了以下几点: 1.使用amfe-flexible,将px转换为rem,用于适配不同宽度的屏幕 首先安装amfe-...
  • 1.安装以下包 npm i lib-flexible sass-loader node-sass postcss-px2rem-exclude --save 2.npm run eject 暴露webpack配置,添加以下代码 const px2rem = require('postcss-px2rem-exclude');...
  • 适配问题用rem单位,其实也是对屏幕进行切分,按照份数,对应成单位,今天弄了一个小demo,先写一个初始化函数initChart()初始化一个图表,配置上基本属性,然后再写一个屏幕适配函数screenAdapter(),在vue挂载...
  • const postcss = px2rem({ // 基准大小 baseSize,需要和rem.js中相同 remUnit: 16 }) // 使用等比适配插件 module.exports = { lintOnSave: true, css: { loaderOptions: { postcss: { plugins: [ postcss ] } } } ...
  • 简单的几步~~~ 这里讲二种方式:1.借助插件实现,2.利用css3媒体查询实现 方法一:下载两个插件 1.安装lib-flexible和px2rem-loader 两个插件 ...npm i lib-flexible -S //生成 ...3.找到文件 node_...
  • ,第一步:在data中设置默认宽高及缩放比,(宽高的值根据自己电脑的情况设置, 博主的是1920*1080) style: { width: "1920", height: "1080", transform: "scaleY(1) scaleX(1) translate(-50%, -50%)" ...
  • 你要的大数据可视化屏幕适配都在这了

    千次阅读 多人点赞 2021-09-07 14:05:54
    前言:在综合了自己所做的几个可视化大屏项目后,总结了以下常用的可视化大屏系统适配方案 文章很长,但干货很多 目录 固定分辨率效果图 左屏:2880*2160分辨率 右屏:2880*2160分辨率​ 中屏:3840*2160...
  • } 重启项目可效果: 配置好后, 不管是移动端还是pc端还是大屏开发都可以轻松应对~ 完结撒花 说个题外话, 根据上面配置好了之后, 在页面中可以直接按照设计图来写样式, 不需要进行任何换算, 但不知道会不会也有同学和...
  • 大屏适配解决方案

    千次阅读 2021-06-03 15:02:23
    大屏适配解决方案(解决不同分辨率下页面展示情况) 以vue 为例,使用rem 通过改变根字体大小,来统一变化页面距离 // 设置 rem 函数 function setRem() { // PC端 console.log("非移动设备"); // 基准大小 ...
  • 可视化:大屏适配

    2022-06-15 17:13:59
    面对的问题:对于前端开发者来说,大屏开发最主要的有以下几个方面需要考虑此方法需固定屏幕宽高,适合整个项目都是大屏页面的工程,但如果是一个项目里嵌入几个大屏页面的话,不推荐此方法;该方法可以解决屏幕适配...
  • 大屏适配解决方案 VUE

    千次阅读 2021-12-03 21:38:08
    最近在做一个数据可视化的项目,整个项目全是大屏展示,期间也是遇到很多问题,最令人头疼的就是大屏适配。我这个项目是要投放到4K超大屏上展示,自然要考虑到分辨率,浏览器缩放,字体(包括图表中的字体)的适配...
  • } } } 在做适配的时候 遇到这个问题 用resize方法来做 但是我的top有问题 我是根据父盒子来去定位 这个echarts的位置的 但是发现改变的时候 这个top的大小会发生变化 不知道是什么问题 会不会是echarts这个方法里面...
  • 数据大屏rem适配方案

    2022-03-05 11:37:27
    一般来说,做PC端的页面并不像移动端那样对分辨率及屏幕大小有的特别强的要求,但是针对数据大屏这种展示型的页面来说,就需要考虑适配的方案了,毕竟要尽可能的保证大部分的主流显示器都能正常展示。 市面上大部分...
  • 数据可视化大屏 前端屏幕多分辨率适配方案(vue) 写在前面: 第一次写博客, csdn账号注册很久了, 应该是2010年注册的, 当时我还在上高中, 当时还在写易语言的, 有些问题搞不懂的会来csdn看大佬是怎么解决的, 也写了...
  • android多分辨率UI适配,该文档由前人文档总结,加上个人总结组成,里面包含了粗略适配,和精确适配的方案。
  • vue不同屏幕分辨率适配(px2remLoader的方法) 采用的是 lib-flexible的可伸缩布局的方法 1、下载lib-flexible npm i lib-flexible --save 2、在项目入库文件main.js里引入lib-flexible import 'lib-flexible' 3、...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,551
精华内容 1,820
关键字:

大屏分辨率适配