仅在移动设备上的彩盒流体布局答案

【问题标题】：Colorbox fluid layout only on mobile仅在移动设备上的彩盒流体布局
【发布时间】：2023-03-03 04:56:22
【问题描述】：

我需要具有静态宽度的颜色框窗口（它实际上是动态的 - 取决于 css 指定的宽度或图像实际宽度等...），移动版本除外。我正在做响应式网站。当我调整浏览器窗口的大小时，它始终具有固定宽度，但是当我在移动设备上时，颜色框窗口比 broser 窗口宽 - 它不会调整大小以适应浏览器窗口屏幕。我应用这个：

$(window).on('resize', function(){
    $.colorbox.resize({width: '100%'});
});

这有帮助，但如果我返回到非移动设备或调整浏览器窗口大小时，它会保持在 100%。但此时我想将颜色框窗口返回为具有以前的静态宽度。请记住，之前的宽度是基于内容宽度（图像宽度）或 css 指定的宽度。

知道怎么做吗？

谢谢

【问题讨论】：

标签： responsive-design resize width colorbox fluid

【解决方案1】：

当用户调整窗口大小时，为什么只希望颜色框为 100% 宽度？请注意，您在 JS 中所做的不是检测用户是否在移动设备上。

看来您应该改用媒体查询。在这里阅读更多：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

【讨论】：