大屏项目总结一

大屏项目主要是想展示数据，以一种充满科技感的形式呈现，主题色以深蓝色为主。 科技感的呈现方式个人总结有以下方式：

• 兼容大屏幕、小屏幕
• 主题颜色需要有未来感，图片大多以蓝色为基调，元素有地球、地图
• 设置不透明度、渐变
• 动画
• 牵一发而动全身：用户切换某个数据筛选项之后全局的数据变化，带着动画变化

1.大屏兼容的方法

1、css 监听页面变化计算变形程度设置transform：scale

// 设计稿中的宽高
const width = ref(1920) 
const height = ref(1080)
// 宽和高的变形程度
const wh = ref(1)
const ww = ref(1)

// 计算变形的方法
const getScale = () => {
  wh.value = window.innerHeight / height.value
  ww.value = window.innerWidth / width.value
}

// 监听网页变形
window.addEventListener('resize', getScale)

样式使用到js的变量，这里用的是vue3，所以使用的是v-bind的形式

.main-screen {
  width: 1920px;
  height: 1080px;
  position: absolute;
  transform: scale(v-bind(ww), v-bind(wh));
}

2、监听页面变化设置css变量

有时候不需要页面那么智能，只需要在某几个地方做兼容就好，那么就可以设置css的变量，在某一个宽高范围去设置想要的数据就好了

// 设置css变量
@screen-min-width: var(--screenMinWidth, 1366px);
@screen-content-width: var(--screenContentWidth, 1300px);
@screen-nav-product-gap: var(--screenNavProductGap, 10%);

const handle = () => {
  const body = document.getElementsByTagName('body')[0]
  const width = body.clientWidth

  if (width >= 1366 && width <= 1920) {
    body.style.setProperty('--screenContentWidth', '1300px')
  } else if (width > 1920) {
    body.style.setProperty('--screenContentWidth', '1440px')
  }

  switch (true) {
    case width >= 1366 && width <= 1440:
      body.style.setProperty('--screenNavProductGap', '10%')
      break
    // 代码省略
  }
}
window.addEventListener('resize', handle)

3、media媒体查询

应用场景会相对单一一些，应用于特定场景

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
  .class {
    background: #ccc;
}

4、使用pxtorem

兼容大屏幕和移动端小屏幕，有三种配置方法，这里就不重复

www.npmjs.com/package/pos…