Question

我有HTML

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

我希望这两个元素重新定位，具体取决于它们显示在屏幕上的大小。在移动电话或低分辨率投影仪等窄屏幕上，我希望桌子显示在div下方的中心位置。使用div缩放以占用父元素的整个宽度。但是在宽屏幕上我希望表格显示在div旁边，其中两个占据父元素的整个宽度。

是否可以在纯CSS中执行此操作？

Answer 1

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

Answer 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%;
    }
}