父 div 之外的扩展 div 内的内容未在移动设备中显示

Question

我正在使用以下 CSS 来允许我在 wordpress 页面上的内容扩展到父 div 之外。效果很好，除非我在移动设备上查看该网站。内容没有根据浏览器的大小进行调整。有关解决此问题的任何建议？

.extended-content-container {
	width: 500%;
	margin-left: -200%;
	padding-top: 0;
	padding-bottom: 60px;
	background-color: #333;
}

.extended-content {
	width: 100%;
	height: 300px;
	text-align: center;
}

<div class="extended-content-container">
<div class="extended-content">
<span style="color: #ffffff;"><span style="color: #ffffff;">
</span></span>
<h2><span style="color: #fff;">HELLO THERE.</span></h2>
<span style="color: #fff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>

</div>
</div>

Answer 1

你不应该使用

width: 500%;
margin-left: -200%;

这样做。既然您确实使用了它，那么内容就会完全按照您的指示去做，宽 5 倍，向左移动两倍的宽度。

如果您坚持在桌面上使用这些声明，则不要使用@media 查询和设置

width: 100%;
margin-left: 0;

更新

当您拥有带有填充的全宽父元素和必须是全宽的子元素，并且您不能在子元素上使用绝对位置时，这是解决方案之一；

子元素左移，子元素宽度增加，公式如下，假设x为父元素左右内边距百分比之和

$child-width-in-percentage = 100 + (x / (100 - x) * 100)

$child-left-margin-in-percentage = x / (100 - x) * 100 / -2

所以，在父 div 的例子中

.single-themes-page {
    padding: 0 10%;
}

child 获得以下样式：

.extended-content-container {
    width: 125%;
    margin-left: -12.5%;
}

如果您在 @media 查询中有不同的父填充百分比值，请在这些 @media 规则中根据上述公式更改子 (.extended-content-container) 宽度和左边距值。

这样您将拥有完全响应的浏览器窗口全宽子。