实现页面自适应包括字体大小满屏自适应

最新推荐文章于 2024-04-29 11:17:53 发布

ssw__

最新推荐文章于 2024-04-29 11:17:53 发布

阅读量101

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/ssw__/article/details/131899633

版权

在这里插入图片描述

mounted() {
      //初始化自适应  ----在刚显示的时候就开始适配一次
      this.handleScreenAuto();
      //绑定自适应函数   ---防止浏览器栏变化后不再适配
      window.onresize = () => this.handleScreenAuto();
    },

handleScreenAuto() {
        const designDraftWidth = 1920; //设计稿的宽度
        const designDraftHeight = 1080; //设计稿的高度
        //根据屏幕的变化适配的比例
        const scale =
          document.documentElement.clientWidth /
            document.documentElement.clientHeight <
          designDraftWidth / designDraftHeight
            ? document.documentElement.clientWidth / designDraftWidth
            : document.documentElement.clientHeight / designDraftHeight;
        //缩放比例
        document.querySelector(
          "#screen"
        ).style.transform = `scale(${scale}) translate(-50%)`;
      },

.screen-root {
  width: 100%;
  height: 100%;
  background-color: #010C19;
  color: #fff;
  position: relative;
  .screen {
    display: inline-block;
    width: 1920px; //设计稿的宽度
    height: 1080px; //设计稿的高度
    transform-origin: 0 0;
    position: absolute;
    left: 50%;
    }
 }