设计在不同的屏幕中破碎[关闭]

Posted 2023-05-08

【中文标题】设计在不同的屏幕中破碎[关闭]

【英文标题】：Design Shattered in Different Screens [closed]

【发布时间】：2021-01-25 03:42:01

【问题描述】：

我设计了一个网页，其中很少有 html 元素没有响应。这些元素是使用jQuery 动态生成的，我相信，应该有一种方法可以让它们看起来具有响应性。 Media Queries 是一个选项，但如果可以使用 BootStrap（虽然我正在使用它，但在少数情况下，无法完美地完成设计）或自定义 CSS 以强制它们做出响应。这是在成功的Ajax 调用上创建HTML 元素的场景：

//Dynamic checkboxes as Flag For Review
$('.cbFlag').each(function () 
    $(this).hide().after('<div class="class_checkbox"></div>');
);

$('.class_checkbox').on('click', function () 
    $(this).toggle lass('checked').prev().prop('checked', $(this).is('.checked'))
); 

我试图修复它但失败了：

.class_checkbox 
    width: 20px;
    height: 18px;
    position: fixed;
    margin-top: -5%;
    margin-left: 82%;
    background: url(https://i.ibb.co/1GnSqmp/example.png);


.class_checkbox.checked 
    width: 20px;
    height: 18px;
    background: url(https://i.ibb.co/jWxbHF5/example-02.png);
 

同理，其他元素的页面有点碎，如下图数字和细节分享截图：图2中，创建了两个div，尝试使用浮动左右定位，但这并没有使它们相应地对齐（这些是屏幕分辨率的屏幕截图 - 1920 * 1080，但在少数情况下分辨率较小时，设计是完美的。再次对于移动视图，数字和标志被粉碎）

当前视图：

图片 1：

图片 2：

预期视图：

【参考方案1】：

我检查了网站，你已经覆盖了 Bootstrap，这是一个更糟糕的解决方案。您应该保留原始 Bootstrap，然后在另一个 CSS 文件或内联样式中进行更改。

另一方面，您已将margin-top: -4% 分配给.headerSection1。这使得部分文本不可见。

您的页面没有响应。它扩展了页面的 100% 宽度。这是因为给容器赋予了负值。

我强烈建议你使用 Bootstrap 的 container-fluid、row 和 cols。

关于您的问题：您的 1 和 10 位于不同的 div 中。您可以将它们放在相同的div 中并定位。

【讨论】：

你的建议非常棒，特别是container-fluid，我非常感谢@sundowatch。虽然我有点卡在旗帜标志和带有斜标志的问题编号上。如果您能告诉我如何处理它们，因为它们是在Ajax 通话中生成的，目前在设备上并没有完美对齐。这是登录详细信息 - passdent.com；用户：[e-mail]；通过：1 - 6。从 Practice 菜单中检查 Best of Three。