小屏幕上的页面布局

您可以在下面看到示例图像，我的布局...该网站工作得很好。但是我在内容部分的左侧使用了一张图片。小屏幕上的页面布局

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

layout

我该如何解决这个问题？

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

编辑：的jsfiddle

JSFiddle

来源

2012-05-29 demyr

该图很有帮助，但您的HTML会有所帮助。 –

非常感谢！我不知道为什么这个网站很难使用？ – demyr

不是。粘贴代码片段，突出显示，然后选择“{}”代码格式按钮。 –

干脆让显示与较小宽度的内容。

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

，问题是：

<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>

来源

2012-05-29 13:50:09 rekire

非常感谢你的男人。这是一个很酷的提示。我会考虑他们，但我的问题是关于左侧的图像对齐。如何将左侧图像和内容部分对齐，以便在通过小屏幕查看时适合屏幕显示。 – demyr

有几种选择。例如。你可以浮动该图像。用一些肮脏的'display：table'和'display：cell'东西，你也可以对标签重新排序。如果您需要更多的细节，请随时询问。 – rekire

您可以使用CSS media queries目标更小的屏幕尺寸，然后要么移到下方的内容的图像，或者完全隐藏图像。现在，请记住，如果您使用display：none隐藏图像，它仍然会下载，但根本不显示。

来源

2012-05-29 13:52:17 chipcullen

非常感谢。这对移动css很有帮助。但我的问题是关于左侧的图像的对齐 – demyr

小屏幕上的页面布局

回答

相关问题