响应式 div 的宽度：1200 像素屏幕上为 120 像素，1920 像素屏幕上为 375 像素

Question

我希望div在 1200px 屏幕上的宽度为 120px （10%），当将窗口大小调整为 1920px 时，宽度将线性增加到 375px 的宽度（约 20%）。如何在不使用 JS 的情况下实现这一点？

我尝试使用 calc 函数，但我想不出满足两者的正确公式。

如果可能的话，我不想使用媒体查询，但如果所有其他方法都失败了，那么在媒体查询中执行此操作的最干净方法是什么？

Answer 1

您可以使用@media-query进行存档

例如：

@media screen and  (min-width: 1920px) 
{
      div{
           width:375px;
       }
}

这就是媒体查询的工作原理

如果您正在寻找 calc 函数，请尝试这样的事情，这里 25em 对应于 400px

{
  min-width: 50%;
  width: calc((25em - 100%) * 1000);
  max-width: 100%;
  /* Change 25em to your breakpoint. */
}

Answer 2

你可以这样写：

div {
height: 200px;
width: 120px;
background-color: tomato;
}
@media (min-width: 1200px) {
  div {
  width: 120px;
  }
}
@media (min-width: 1920px) {
  div {
  width: 375px;
  }
}

这只是使用几个媒体查询和一个默认宽度，这也是必要的。我不确定为什么您不想使用媒体查询，所有当前浏览器（以及大多数旧浏览器）都支持它们。

在您的评论之后，您可以尝试使用视口单位（本代码段中的视口宽度）执行某些操作。下面是一个没有媒体查询的更新示例：

div {
height: 200px;
width: 10vw;
min-width: 120px;
max-width: 375px;
background-color: tomato;
}