vue项目实现大屏展示自适应问题

此处的项目为vue2版本，因为该项目立项阶段未要求兼容大屏设备和移动端设备，原设计稿尺寸1920X1080像素，如何实现响应式布局。

一、安装 postcss-px2rem 和 lib-flexible-computer

npm install postcss-px2rem --savenpm install lib-flexible-computer --save

二、修改全局 CLI 配置

module.exports = {publicPath: "./",outputDir: "dist",lintOnSave: true,css: {loaderOptions: {css: {},postcss: {plugins: [require("postcss-px2rem")({remUnit: 192 //  设计图宽度/10})]}}},
};

三、修改 main.js

import Vue from 'vue'
import App from './App'
// 计算响应式
import 'lib-flexible-computer'new Vue({render: h => h(App)
}).$mount('#app')

四、注意

会自动将vue文件style标签中的px转换城rem；
不能将标签内嵌样式中的px转换城rem；

vue项目实现大屏展示自适应问题相关推荐

VUE 项目实现大屏展示的响应式
vue项目实现大屏展示自适应问题此处的项目为vue2版本,因为pc端的项目没有采用响应式自适应手机端的设计,所以使用lodash插件实现屏幕移动端自适应. 首先下载lodash插件. npm i ...
vue项目实现大屏PC端字体自适应
vue项目实现大屏PC端字体自适应我们字体自适应选择使用rem作为单位,通过监听窗口大小的变化,更新1rem的对应的px数来实现字体自适应. 注意该方法,我们需要在APP.vue文件中实现, 首先A ...
vue项目：大屏自适应解决方案（两种）
css缩放方案: 利用transform:scale 进行适配推荐使用v-scale-screen 值得注意的是: vue 2.6.2.7 要使用 npm install v-scale-scree ...
关于大屏展示自适应的处理
原理:使用固定宽高(一般是16:9)的宽高比然后使用缩放函数做自适应放代码: mounted() {var setScale = (() => {const designWidth = 19 ...
vue项目rem 大屏可视化适配
在工具文件夹中创建一个新的JS文件 JS文件中创建一个方法 // 如果页面发生改变更改rem得值 function setRem() {// 默认使用100px作为基准大小const baseSiz ...
vue大屏展示高度自适应
vue大屏展示获取当前屏幕盖度 <template><div ref="bigshow"></div> &l ...
vue大屏可视化自适应完美方案
背景在做大屏可视化项目的时候,一般设计稿会设计成1920*1080,但是页面写死1920*1080在2k.4k等分辨率的屏幕下是不适配的.如果页面能够根据屏幕比例进行等比缩放那就好了. 比例什么? ...
Vue大数据可视化（大屏展示）方案升级，发布全新Vue3版本
千呼万唤始出来,终于将原先的 Vue2 升级到了 Vue3,并且使用了 Ts,部分界面使用了 Tsx 的写法,欢迎大家来点个星星~ 项目地址:Vue3 可视化大屏展示,点颗星星吧~ 界面展示(这个是动 ...
基于vue大数据可视化（大屏展示）案例
项目地址: vue-big-screen 点击这里一.项目描述 1,一个基于 vue.datav.Echart 框架的 " 数据大屏项目 ",通过 vue 组件实现数据动态刷新 ...

vue项目实现大屏展示自适应问题

vue项目实现大屏展示自适应问题

一、安装 postcss-px2rem 和 lib-flexible-computer

二、修改全局 CLI 配置

三、修改 main.js

四、注意

vue项目实现大屏展示自适应问题相关推荐

最新文章

热门文章

vue项目实现大屏展示 自适应问题

vue项目实现大屏展示 自适应问题

一、安装 postcss-px2rem 和 lib-flexible-computer

二、修改全局 CLI 配置

三、修改 main.js

四、注意

vue项目实现大屏展示 自适应问题相关推荐

最新文章

热门文章

vue项目实现大屏展示自适应问题

vue项目实现大屏展示自适应问题

vue项目实现大屏展示自适应问题相关推荐