小屏幕上的页面布局

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 media queries定位较小的屏幕尺寸，然后将图片移至内容下方，或完全隐藏图片。现在，请记住，如果使用display：none隐藏图像;它仍然会下载，但根本不会显示。