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;
  }
}

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

根据您的评论，您可以尝试使用Viewport单元（此片段中的视口宽度）。这是一个没有媒体查询的更新示例：

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

自适应Div的宽度：1200px屏幕上120px，1920px屏幕上375px

2 个答案: