javascript - 当页面宽度小于 1350 像素时，防止页面上的内容移动

Question

我试图阻止页面上的内容在页面宽度低于 1350 像素时移动和调整大小。最小宽度不适用于此..那我该怎么办？

顺便说一句，在我的 css 代码中，对于 width, height, transformation: transform，我使用的是 vmax 值，而不是 px 或 %。所以 min-width 可能不适用于它，因为当我调整页面大小时，我看到容器 div 停留在 1200px，但我在其中的元素不断调整大小，因为它们正在使用vmax，所以他们也只是根据窗口大小调整那里的大小。:(

我将我所有的 html 代码放在一个 div 容器中，然后我这样做了:

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

但是还是不行..

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

(当我的浏览器宽度低于 1350 像素时，我试图停止调整三个白色矩形的大小...)

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 文件的底部。