我试图阻止页面上的内容在页面宽度低于 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 像素时,我试图停止调整三个白色矩形的大小...)
最佳答案
#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 文件的底部。
关于javascript - 当页面宽度小于 1350 像素时,防止页面上的内容移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52894814/