Question

我正在尝试防止宽度在1350 px以下的页面上的内容移动，调整大小。最小宽度对此无效。.那我该怎么办？

在我的CSS代码中，对于width, height, transformation: translate，我使用的是值vmax，而不是px或%。因此，min-width可能不起作用，因为当我调整页面大小时，我看到容器div停留在1200px，但是其中的元素一直在调整大小，因为他们正在使用vmax ，所以它们也只根据窗口大小调整该大小。。：：

我将所有html代码放在div容器上，并且这样做了：

.container {
    min-width: 1350px; 
    margin: 0 auto;
}

但是还是不行。

代码+预览：https://plnkr.co/edit/4BizatqN0GkGc7nedoBF?p=preview

（当我的浏览器宽度小于1350px时，我正试图停止调整三个白色矩形的大小... ）

Answer 1

#tabcmp0 {
    position: absolute;
    top: 6vmax;
    left: 15.25vmax;
    width: 200px;
    height: 400px;
    background-color: white;
    border-radius: 8px;
    opacity: 1;
    pointer-events: auto;
}

#tabcmp1 {
    position: absolute;
    top: 6vmax;
    left: 43.25vmax;
    width: 200px;
    height: 400px;
    background-color: white;
    border-radius: 8px;
    opacity: 1;
    pointer-events: auto;
}

#tabcmp2 {
    position: absolute;
    top: 6vmax;
    left: 71.25vmax;
    width: 200px;
    height: 400px;
    background-color: white;
    border-radius: 8px;
    opacity: 1;
    pointer-events: auto;
}

// Media queries go at the bottom of your css files
 @media(min-width: 1350px) {
    #tabcmp0 {

      width: 27vmax; // pick custom widths and heights
      height: 43vmax;

  }

  #tabcmp1 {

      width: 27vmax;
      height: 43vmax;

  }

  #tabcmp2 {

      width: 27vmax;
      height: 43vmax;

  }
}

请记住，您现在必须编辑其他内容以使其看起来自然。但是您现在可以自己进行操作了：)在此示例中，我使用的是最小宽度而不是最大宽度。

请记住将媒体查询放在css文件的底部。

Answer 2

尝试这个简单的解决方案

@media only screen and (max-width: 1350px) {
    div[id^="tabcmp"] { min-width: 364px;}
}

宽度小于1350 px时防止页面上的内容移动

2 个答案: