css 屏幕适配，定义方法做全局尺寸缩放

strong90

已于 2022-10-19 16:10:31 修改

阅读量681

点赞数

分类专栏：其他文章标签： CSS 响应式布局视口单位像素转换工具类

于 2022-05-14 13:14:04 首次发布

本文链接：https://blog.youkuaiyun.com/strong90/article/details/124767048

版权

其他专栏收录该内容

3 篇文章

订阅专栏

定义一个util.css的工具类，里面写上以下方法

$design-width: 1920;

@function trans($px) {
  @return calc(100vw * #{$px} / #{$design-width});
}

全局引用此类

使用：

  .layout-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 trans(20);
    color: #ffffff;
    height: trans(60);
    background: $demo-success-black;

    .icon {
      display: flex;
      align-items: center;
      width: trans(160);

      img {
        width: trans(60);
        height: trans(60);
        border-radius: 50%;
      }

      .title {
        margin-left: trans(15);
        display: inline-block;
      }
    }
  }