CSS 响应 1080p 及以上答案

【问题标题】：CSS responsive for 1080p and aboveCSS 响应 1080p 及以上
【发布时间】：2020-12-12 09:13:20
【问题描述】：

最近我正在考虑创建一个响应式网站，该网站在高分辨率屏幕（如 2k 和 4k 屏幕）上显示效果非常好，我还将使其在桌面和小型设备上响应。

问题：
因为不同的屏幕尺寸会有不同的字体大小、内边距和边距，所以会有很多类似的媒体查询代码，我认为重复类似的媒体查询代码不是一个好主意，所以还有其他好的方法吗？

重复相似代码示例：

@media only screen and (min-width: 900px) {
  .title{
    font-size: 1rem;
    margin-bottom: 0.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .title{
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 1920px) {
  .title{
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }
}

@media only screen and (min-width: 2560px) {
  .title{
    font-size: 3rem;
    margin-bottom: 1rem;
  }
}

@media only screen and (min-width: 3840px) {
  .title{
    font-size: 3.5rem;
    margin-bottom: 1.2rem;
  }
}

以上方法是唯一的方法还是我可以使用任何其他方法，所以我不需要在每个不同的屏幕尺寸上更改字体大小、填充和边距。

【问题讨论】：

你可以缩小 vw 并使用 calc（不知道这是否是个好主意），或者使用 JS 来减少重复
我个人在我的项目中这样做。这是正常的做法。最重要的是，每个媒体请求都具有技术必要性。

标签： html css sass responsive-design

【解决方案1】：

经过一些尝试，我创建了一个 sass mixin 来帮助自己进行响应式设计，我不确定这是否 100% 有效，但我认为它可能会有所帮助。

代码：

@function size-number($base-size, $new-size) {
    @if $new-size != 0 {
        @return $new-size;
    } @else {
        @return $base-size;
    }
}

@mixin break-points-resize ($properties) {
    $PROPERTIES: $properties;
    $BREAKPOINTS: ("1920px","2560px","3840px",);

    @for $i from 1 through length($BREAKPOINTS) {
        @media only screen and (min-width: nth($BREAKPOINTS, $i)) {
            @each $PROPERTY-KEY, $PROPERTY-VALUE in $PROPERTIES {
                $SIZE-NUMBERS: map-get($PROPERTY-VALUE, "size" );
                // [1920px default size => 2], [2560px default size => 3], [3840px default size => 4]
                $BASE-SIZES: (size-number(2,nth($SIZE-NUMBERS, 1)),size-number(3,nth($SIZE-NUMBERS, 2)),size-number(4,nth($SIZE-NUMBERS, 3)));
                $INDIV-PROPERTY-KEY: $PROPERTY-KEY;
                $VALUE-NUMBERS: map-get($PROPERTY-VALUE, "value" );
                #{$INDIV-PROPERTY-KEY}: $VALUE-NUMBERS * nth($BASE-SIZES, $i);
            }
        }
    }
}


h1{

    // Specify size, it will use the size that is specified (Three breakpoints, three size)
    @include break-points-resize(("font-size":("value": 2rem,"size": (2,3,3.5))));

    // Specify 0, it will use the default size (Three breakpoints, three size)
    @include break-points-resize(("font-size":("value": 2rem,"size": (0,0,0))));
}

抱歉代码有点乱

【讨论】：