html - 如何在手机上获得全宽背景？

Question

我在我的网站上使用扩展到 div 容器之外的全 Angular 背景，cf. http://www.csselectronics.com/ (接近尾声)。

这在桌面上运行良好，但我很难在移动设备上复制效果。我使用了两种不同的 CSS 样式，通过基于屏幕宽度的设置加载:

<link rel="stylesheet" media="screen and (max-width: 600px)" href="http://canlogger1000.csselectronics.com/lightbox/FullWidth_Mobile_v17.css">

<link rel="stylesheet" media="screen and (min-width: 601px)" href="http://canlogger1000.csselectronics.com/lightbox/FullWidth_Big.css">

问题出在手机版上；如您所见，如果在移动设备上查看页面，背景颜色不会延伸到容器外以覆盖 100% 的可见宽度。我已经尝试了很多东西，但我总是遇到我扩展 View 以便用户可以水平滚动的问题，我想避免这种情况。

Answer 1

您的意思是底部带有“强大、简单、实惠”等字样的 block 吗？

在不更改 HTML 的情况下没有简单的方法可以做到这一点，除非您添加 width: 120% 或类似的内容以强制 block 溢出容器，但这会导致水平滚动你提到。

如果您将 block 从常规容器中取出，并为其使用新的 HTML block ，则方法会简单得多。

就是这样，(粗略的例子)

<div class="container>
// Your regular content here
</div>

//In this grey block, make it width 100% and add the content you want
<div class="grey-block">
//So the content inside will still be aligned with the rest of the page
<div class="container">
</div>
</div>

//Continue with the rest of the page
<div class="container>
</div>