大屏食用指南

rem大法

util.js

// 获取fontSize,配合echarts食用
export function getFontSize() {
  let windowWidth =
    window.innerWidth ||
    document.documentElement.clientWidth ||
    document.body.clientWidth;
  let windowHight =
    window.innerHeight ||
    document.docuementElement.clientHeight ||
    document.body.clientHeight;
  let fontSize;
  if (windowWidth < 1366) {
    fontSize = windowWidth / 100;
  } else {
    if (windowWidth / 16 > windowHight / 9) {
      fontSize = ((windowHight / 9) * 16) / 100;
    } else {
      fontSize = windowWidth / 100;
    }
  }
  return fontSize;
}

// 小辉哥的高级方法
export function _regWindowObject(map) {
  for (const key in map) {
    window[key] = window[key] || map[key];
  }
}

//监听 HTML 文档被解析完成的事件,定义最大的 fontSize
export function changeFontSize() {
  // 获取html标签
  const html = document.querySelector("html");
  // 屏幕的宽度除以10，获取跟元素fontSize标准
  let windowWidth =
    window.innerWidth ||
    document.documentElement.clientWidth ||
    document.body.clientWidth;
  let windowHight =
    window.innerHeight ||
    document.docuementElement.clientHeight ||
    document.body.clientHeight;
  let fontSize;
  if (windowWidth < 1440) {
    fontSize = windowWidth / 100;
  } else {
    if (windowWidth / 16 > windowHight / 9) {
      fontSize = ((windowHight / 9) * 16) / 100;
    } else {
      fontSize = windowWidth / 100;
    }
  }
  // 定义根元素 大小
  html.style.fontSize = fontSize + "px";
}

//全局事件注册
export function eventRegister() {
  document.addEventListener("DOMContentLoaded", () => {
    changeFontSize();
  });
  window.addEventListener("resize", () => {
    changeFontSize();
  });
}

###　全局js声明

import {
  getFontSize,
  _regWindowObject,
  eventRegister
} from '@/hkScreen/scripts/utils'
//适当引入vue/echarts

Vue.prototype.GetFontSize = getFontSize
Vue.component('vEcharts', vECharts);
// 小辉哥的高级用法，看不懂
_regWindowObject({
  echarts: Echarts,
  fontSizeHelper: (res) => Math.ceil(res * getFontSize())
});
eventRegister();

new Vue({
    router,
    store,
    render: (h) => h(App),
    mounted() {}
}).$mount('#app')

CSS中的使用

按照设计稿，切百分比，比如宽度占屏幕宽度的10%，则width: 10rem;

缺点

需要切换百分比计算长宽

#　transform大法

util.js

window.onload = function () { // dom元素加载后计算缩放比例
    window.addEventListener('resize', function () {
      domResize()
    })
    domResize()
  }
document.addEventListener('DOMContentLoaded', domResize, false);
function domResize () {
    let dom = document.getElementsByTagName('body')[0] 
    let w = 1920
    let clientWidth =document.documentElement.clientWidth
    let scale = clientWidth / w     // 通过浏览器可视宽 / 初始宽度（设计图宽度） 得到缩放比例
    // 设置默认页面高度为 100vh  防止非全屏下 dom 元素显示不全
    document.getElementsByClassName('main-view')[0].style.height = '100vh' 
    if (clientWidth <= 1920) { // 小于1910 进行缩放
    
      dom.style.transform = "scale(" + scale + ")" // 设置缩放
      dom.style.overflow = "hidden"  // 超出隐藏
      dom.style.transformOrigin = "left top 0" // 元素复位
      dom.style.marginLeft = "0px" // 元素复位
      dom.style.width = clientWidth + 'px' // 设置页面宽度
      // 设置页面高度 可以使用 vuex 存储高度，需要使用的页面 动态设置 不过判断需要改一下了
      document.getElementsByClassName('main-view')[0].style.height = '1080px'
      
      console.log('视窗高度',document.documentElement.clientHeight)
    }
    console.log('缩放比列:',(clientWidth / w), '视窗宽度',clientWidth, '======', w,)
  }

CSS

按照原稿px绘画,不需要对宽度做特殊处理

缺点

部分动画效果和宽高计算会因为transform出现异常