大屏显示

全屏显示的方式

 

新写法：

这是顶部定义缩放的缩放比

:root {
  --base-scale: min(1, 100vw / 1920, 100vh / 1080);
  
  width: 100%;
  aspect-ratio: 1920 / 1080;
}

 

布局缩放写法 - calc

比如这个外边距margin: 20px 等同于这个缩放 margin: calc(20 * var(--base-scale))；

.bs-box {
    padding: calc(30 / 1920 * 100%);
}
// 等同于下面

.bs-box {
    padding: calc(30 * var(--base-scale));
}

 

文本缩放写法 - clamp

比如这个内容字体大小 font-size: 16px  等同于这个缩放  font-size: clamp(14px, calc(0.83vw * var(--base-scale)), 18px)

.bs-txt {
    font-size: clamp(14px, calc(0.83vw * var(--base-scale)), 18px)
}

 

 

以下是旧写法：

.all-screen-box{
  width: 100%;
  height: 100vh;
  overflow: hidden;
  
  /* 使用padding-top保持比例 */
  &::before {
    content: "";
    display: block;
    padding-top: 56.25%; /* 1080/1920 = 56.25% */
  }
  
  > *:not(::before) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  @media (min-aspect-ratio: 1920/1080) {
    /* 宽屏处理 - 按高度计算宽度 */
    width: calc(100vh * 1920 / 1080);
    margin: 0 auto;
  }
}