大家好，我是一位95后全栈工程师，最近一段时间工作比较忙加上在掘金写的原创文章收到有人的恶意评论，心情很低落，断更了一段时间，很抱歉了。不管怎么样，还是感谢掘友们的支持，虽然勤勤恳恳写文章会被从来不写任何文章的人骂成是垃圾，但至少自己的大多文章也受到了很多人的喜爱和支持，证明我并没有白写，这里我特别感谢支持我的掘友们，你们的鼓励是我持之以恒前行的动力。

言归正传，近一段时间前端比较典型的就是写了一个大屏项目，每个前端都会经历大屏的开发，不管是投屏到4k显示器还是投屏到100寸的展厅里，都要保证页面的自适应。这里我实现的样式用sass语言。

大屏自适应

全局global.scss样式部分直接上代码：

@use "sass:math";
// 默认设计稿的宽度和高度
$default-design-width: 3840px;
$default-design-height: 2160px;
// 根据屏幕分辨率调整的宽度和高度
$designWidth: $default-design-width;
$designHeight: $default-design-height;
// px 转为 vw 的函数
@function vw($px) {
  @return math.div($px, $designWidth) * 100vw;
}
// px 转为 vh 的函数
@function vh($px) {
  @return math.div($px, $designHeight) * 100vh;
}
// 根据屏幕分辨率调整设计稿尺寸
@media (max-width: 3840px) and (max-height: 2160px) {
  $designWidth: 3840px;
  $designHeight: 2160px;
}
@media (max-width: 2560px) and (max-height: 1440px) {
  $designWidth: 2560px;
  $designHeight: 1440px;
}
@media (max-width: 1920px) and (max-height: 1080px) {
  $designWidth: 1920px;
  $designHeight: 1080px;
}
@media (max-width: 1366px) and (max-height: 768px) {
  $designWidth: 1366px;
  $designHeight: 768px;
}
body{
  width: 100vw;
  height: 100vh;
  background-color: #000000;
  box-sizing: border-box;
  overflow-x: hidden;
  font-family: "AlibabaPuHuiTi-Regular";
}
...

设计师给我的稿子是按照4k显示屏开发的，所有的宽高都是按照3840px*2160px来计算的，所以这里给了一个默认的宽高，然后根据屏幕的自适应等比计算。

比如：

这里设计稿给到的宽320px高120px,这边用vw(320px),vh(120px)去等比计算，省去了很多麻烦，跟着设计稿画页面就完事了。

炫酷效果无缝滚动

然后里面很多动效，比如常用的表格轮博滚动，vue3-seamless-scroll来实现，Vue3.0 无缝滚动组件，支持Vite2.0，支持服务端打包

详情地址：…

css工具库

这里推荐：/play/basic有很多好用的样式，可以页面设置，代码一键拷贝即可使用，节省了很多开发时间成本。

引入百度地图，城市打点标记

html页面引入

  <script src="//api.map.baidu.com/api?type=webgl&v=2.0&ak=xxxxxxxxxxxxx">script>

业务代码使用

<script setup>
import {ref,reactive, watch,onMounted} from 'vue';
const initMap = async (city,markList) => {
      let Bmap = window.BMapGL
      var b = new Bmap.Map("mapMark")
      b.setMapStyleV2({     
        styleId: '1e3322xxxxxxxxxxxxxxx287b' //这里是百度开发平台的样式生成的id
      });
      // b.centerAndZoom(new Bmap.Point(104.328743,32.917728), 6.6)   
      // b.setTilt(40); 
      b.enableScrollWheelZoom(true)
      if(markList && markList.length > 0){
        markList.forEach(async (item,index)=>{
          const loc = await getLocationByCityName(item + '市','中国');
          const marker= addIconByCity(loc);
          b.addOverlay(marker);
        })
      }
      const loc = await getLocationByCityName( '兰州市','中国');
      b.centerAndZoom(new Bmap.Point(loc.lng, loc.lat), 7);
      b.setTilt(10); 
}
const getLocationByCityName = (city,country)=>{
    return new Promise((resolve, reject) => {
      let location = {};
      let Bmap = window.BMapGL;
      var b = new Bmap.Geocoder();
      b.getPoint(city + country, (res) => {
        if (res) {
          location.lat = res.lat;
          location.lng = res.lng;
          resolve(location); 
        } else {
          reject({});
        }
      });
    });
}
const addIconByCity = (location)=>{
      let Bmap = window.BMapGL;
      const pic = require('../images/mark.png');
      var icon = new Bmap.Icon(pic, new Bmap.Size(52, 52),{
        anchor: new Bmap.Size(30, 50), 
      });
      const cityPoint = new Bmap.Point(location.lng, location.lat);  
      var marker = new Bmap.Marker(cityPoint);
      marker.setIcon(icon);
      return marker
}
onMounted(()=>{
  const markList = ['北京','上海','无锡','厦门','成都','成都']
  initMap('成都',markList);
});
script>
<style lang="scss" scoped>
  .mapMark{
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    top:0;
    z-index: 1;
    background-color: #000000;
  }
style>

echarts自适应

其它各种贼啦炫酷的图表样式用的是echarts，然后在js代码中调整自适应

const systemStaionEcharts = (data,total) => {
  try {
    const myChart = echarts.init(document.getElementById("pieEcharts"));
    window.addEventListener("resize", () => {
      myChart.resize();
    }, false);
    const option = pieEchartsOptions(data,total);
    myChart.setOption(option);
  } catch (e) {
    console.error(e)
  }
}

这里也需要用js去动态计算echarts的细节样式，这里写了一个utils.js工具函数

// 默认设计稿的宽度和高度
var defaultDesignWidth = 3840;
var defaultDesignHeight = 2160;
/**
 * 根据屏幕分辨率计算调整后的宽度，保持16:9比例
 * @param {number} designWidth - 设计稿的宽度
 * @returns {number} 调整后的宽度
 */
function calculateWidth(designWidth) {
    // 获取当前屏幕的宽度
    const screenWidth = window.innerWidth;
    const widthRatio = screenWidth / defaultDesignWidth;
    // 计算调整后的宽度
    const scaledWidth = designWidth * widthRatio;
    return scaledWidth;
}
/**
 * 根据屏幕分辨率计算调整后的高度，保持16:9比例
 * @param {number} designHeight - 设计稿的高度
 * @returns {number} 调整后的高度
 */
function calculateHeight(designHeight) {
    // 获取当前屏幕的宽度
    const screenHeight = window.innerHeight;
    const heightRatio = screenHeight / defaultDesignHeight;
    // 计算调整后的高度
    const scaledHeight = designHeight * heightRatio;
    return scaledHeight;
}
export {
    calculateWidth,
    calculateHeight
}

然后在文件中引入函数，使用calculateWidth, calculateHeight去计算细节

import { calculateWidth, calculateHeight} from '../utils/scaleSizeToScreen';
export const pieEchartsOptions = () => {
    return {
        title: {
            subtext: '系统部署',
            textStyle: {
                fontSize: calculateWidth(49),
            },
            subtextStyle: {
                fontSize: calculateWidth(18),
            },
        },
        ...
    }
}

最后，大屏考虑到性能，还有很多地方做了一下优化，比如为了保证页面的稳定性，自己提前引入了一份静态数据文件供页面渲染，减少接口请求的等待依赖，然后接口响应后再去动态调整。再比如实时数据用webSocket类型接口，然后多写一些try catch防止脏数据渲染出现问题，能够及时定位问题所在。还有图片格式，要跟设计师保持沟通，在不影响美观的情况下能有多小压缩到多小，用小体积的文件格式等等，最后把http1.1升级带http2就完事了。