css - 在 1920px 屏幕上响应 Div 的宽度 : 120px on 1200px Screen, 375px

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. */
}