完整的浏览器宽度和 css 动态定位元素答案

【问题标题】：full browser width and css dynamically positioned elements完整的浏览器宽度和 css 动态定位元素
【发布时间】：2013-06-07 19:56:08
【问题描述】：

我有 HTML

<div class="Box">
    <img width=100% src="...">
</div>
<table class="tab1">
    ...
</table>

我希望这两个元素根据它们所显示的屏幕大小重新定位。在手机或低分辨率投影仪等窄屏幕上，我希望表格在 div 下方居中显示。随着 div 缩放以占据父元素的整个宽度。但在宽屏幕上，我希望表格出现在 div 旁边，它们两个占据父元素的整个宽度。

是否可以在纯 CSS 中做到这一点？

【问题讨论】：

标签： css

【解决方案1】：

您需要响应式网页设计。这是一篇关于如何做到这一点的好文章：http://alistapart.com/article/responsive-web-design

【讨论】：

【解决方案2】：

您可以尝试使用 CSS3 @media 来解决该问题。

.Box
{
    width: 100%;
}


/* overwrite, if smartphone */
@media screen and (max-width: 480px) 
{
    .Box, .tab1
    {
        width: 50%;
    }
}

你可以试试手持媒体类型：

@media handheld 
{
    .Box, .tab1
    {
        width: 50%;
    }
}

【讨论】：