css - 小屏幕上的页面布局

Question

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

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