css - 小屏幕上的页面布局

Question

您可以看到下面的示例图像，我的布局......该网站运行良好。但我在左侧使用了图像，超出了内容部分。

因此，如果通过笔记本或手机等小屏幕访问，则内容部分不适合屏幕。它从图像的左侧开始显示。因此，内容部分在右侧流出了一点，与任何其他 960 px 网站不同，内容不适合屏幕。它在右侧流出了一点，因为有 150 像素宽的图像。

我该如何解决这个问题？

如果通过小屏幕访问，则无需显示图像。或者..还有其他解决方案吗？

编辑：JsFiddle

JSFiddle

Answer 1

只需允许以较小的宽度显示您的内容。

对于移动优化，您还应该添加一些元标记来控制缩放系数。

像这里这样：

<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="user-scalable=no, width=device-width, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />

要添加特殊的 css 规则，请在此处尝试：

<style type="text/css" media="screen">
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 630px) {
    ...
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
    ...
}
</style>

Answer 2

您可以使用CSS 媒体查询来定位较小的屏幕尺寸，然后将图像移动到内容下方，或完全隐藏图像。现在，请记住，如果您使用 display:none 隐藏图像；它仍然会下载，但根本不显示。