vue 适配大屏 页面 整体缩放

文章介绍了如何在使用Element-UI时,由于弹框缩放问题,将自定义样式添加到body上,通过监听窗口大小调整,实现页面在不同分辨率下的响应式布局。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

正常应该放在app.vue 里面。我这里因为用到element-ui 弹框无法缩放,所以加在body上面

    (function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
        };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

  var markDate = document.querySelector('body')
  var bodywidth = 1920
  var bodyheight = 1080
  let w = window.innerWidth / bodywidth;
  let h = window.innerHeight / bodyheight;
  markDate.style.cssText = `width:1920px; height: 1080px; transform: scaleY(${h}) scaleX(${w}) translate(-50%, -50%)`
    window.addEventListener('resize', (e) => {
      let x = window.innerWidth / bodywidth;
      let y = window.innerHeight / bodyheight;
      markDate.style.cssText = `width:1920px; height: 1080px; transform: scaleY(${y}) scaleX(${x}) translate(-50%, -50%)`
    })
app.vue 

### 实现 Vue2 数据页面内容的响应式布局及同比例缩放 #### 使用 ECharts 和 CSS 进行模块化设计 对于数据展示,实现响应式的常见方式是将页面按照功能或视觉区域划分为多个独立组件。这样做不仅提高了代码的可维护性和重用率,还增强了项目的结构清晰度[^1]。 ```javascript // Example of a modular component structure in Vue.js <template> <div class="dashboard"> <!-- Individual components representing different sections --> <sectionA /> <sectionB /> ... </div> </template> <script> import sectionA from './components/SectionA.vue'; import sectionB from './components/SectionB.vue'; export default { name: 'Dashboard', components: { sectionA, sectionB } }; </script> ``` #### 绑定数据到视图层 当涉及到从单一API获取整个幕所需的所有数据时,可以考虑通过Vuex管理状态来简化全局数据流处理过程。这有助于保持应用逻辑的一致性并减少重复请求次数。 ```javascript // store/index.js const state = { dashboardData: null, }; const actions = { async fetchAllData({ commit }) { const response = await axios.get('/api/dashboard'); commit('setDashboardData', response.data); }, }; const mutations = { setDashboardData(state, data) { state.dashboardData = data; }, }; ``` #### 利用CSS和JavaScript创建自适应布局 为了使界面能够根据浏览器窗口尺寸动态调整其外观,在样式表中采用媒体查询配合相对单位(如`rem`, `vw`)是非常有效的手段之一;同时借助于JavaScript监听resize事件实时更新DOM元素属性值以达到最佳显示效果[^2]。 ```css /* styles.css */ body { margin: 0; } .container { width: 100%; height: 100vh; } ``` ```javascript // main.js or within specific component script tag window.addEventListener('resize', () => { let scaleRatio = window.innerWidth / designWidth; // Assume you have defined the designWidth variable somewhere. document.documentElement.style.setProperty('--scale-ratio', `${scaleRatio}`); }); ``` #### 应用 PostCSS 插件优化移动端适配方案 针对不同设备间的差异性需求,可以通过配置PostCSS插件链中的`postcss-pxtorem`工具来自动生成基于根字体小的比例转换规则,从而确保文字和其他UI控件能够在各种分辨率下都能良好呈现[^3]。 ```json { "plugins": [ require('autoprefixer')({ overrideBrowserslist: ["last 2 versions"], cascade: false }), require('postcss-pxtorem')({ rootValue: 16, propList: ['*'], selectorBlackList: ['.ignore'] }) ] } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值