Css：有没有更快捷的方式来编写多媒体查询

selector { padding-left: 19% }

@media only screen and (min-width: 1300px) {
  selector { padding-left: 17% }
}

@media only screen and (min-width: 1420px) {
  selector { padding-left: 17% }
}

@media only screen and (min-width: 1480px) {
  selector { padding-left: 16.5% }
}

@media only screen and (min-width: 1520px) {
  selector { padding-left: 16% }
}

@media only screen and (min-width: 1585px) {
  selector { padding-left: 15.5% }
}

@media only screen and (min-width: 1620px) {
  selector { padding-left: 15% }
}

@media only screen and (min-width: 1720px) {
  selector { padding-left: 14% }
}

@media only screen and (min-width: 1820px) {
  selector { padding-left: 13% }
}

@media only screen and (min-width: 1920px) {
  selector { padding-left: 12% }
}

.wrapper {
  width: 100px;
  height: 100px;
}

.padding-box {
  padding-left: 19%;
  outline: 1px solid red;
}

@media only screen and (min-width: 1420px) {
  .padding-box {
    padding-left: calc(17% - (100vw - 1420px) * (17 - 12) / (1920 - 1420));
  }
}

@media only screen and (min-width: 1920px) {
  .padding-box {
    padding-left: 12%;
  }
}

<div class="wrapper">
  <div class="padding-box">
    123
  </div>
</div>

Css相关问答推荐

如何在CSS中使用nextJs来指定基色？

Css-如何隐藏WP管理菜单上没有css类的第4<；li&>

Css扩展搜索栏，如何添加图标结束？

如何使重复线性渐变适合字体大小？

此css Select 器的总体特性是什么？按钮：不是(#mainBtn，.cta)

如何将Ant设计日期 Select 器的图标设置在输入 Select 器之前而不是之后

如何使用遮罩创建手绘SVG动画

如何使shiny 的showNotification可滚动？

2 列 UL，右列中的列表项数量为奇数？

应用边框半径的 iframe 在 4 个角上有细曲线

在 React 中使用 CSS 动画 onClick()

TypeScript 中有效的 CSS 属性名称数组，但带有连字符

使用 React JS 和自定义 CSS 创建 Cookie 横幅

如何在流线型多页面应用程序中在表情符号和页面名称之间留出一些空白

Sass @use 排序

有没有办法让它比它更敏感？

CSSzoom 高度以匹配宽度 - 可能与外形尺寸

可变高度的 CSS 浮动 div

在 CSS 中使用多个 @font-face 规则

如何在页面上居中 twitter bootstrap 选项卡？