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

Question

我有 HTML

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

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

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

score 2 · Accepted Answer

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

score 2 · Accepted Answer

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

.Box
{
    width: 100%;
}


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

或者，您可以尝试媒体类型手持设备：

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

2 回答 2