0

我有一个用于桌面屏幕的两列布局的网页，HTML 是按特定顺序编写的，以实现所需的布局，基本设置如下：

<div>
    <div class="left-column">
        <h1>Heading 1</h1>
        <p>Text here...</p>
    </div>
    <div class="right-column">
        <img>
    </div>
</div>
<!-- columns to sit side by side -->

但是，对于较小的屏幕，必须简化此布局（一列，从上到下），但由于 HTML 的原始顺序，我发现很难使用媒体查询重新定位这些元素。对于较小的屏幕，我希望布局如下：

<div>
    <h1>Heading 1</h1>
    <img>
    <p>Text here...</p>
</div>

正如你所看到的，我只想要一个 div 并且在and元素<img>之间移动。<h1><p>

如何实现这种仅在较小屏幕上显示的替代 HTML 布局？

4

4 回答 4

1

如果你熟悉 PHP，你应该使用一个库（比如http://mobiledetect.net/）来检测你的网站运行的设备，然后提供你想要显示的版本。

在您的情况下，您将有一个 if/else 句子，其中您的 div 包含在 PHP 变量中，具体取决于 mobiledetect 的结果。这可以确保您没有重复的内容（这对 SEO 不利）。

于 2013-08-07T09:30:25.763 回答
1

粗略的解决方案，但这是一个无脚本的解决方案。

img在左侧 div 中以及h1&之间保留一个重复元素p。默认保留dislay:none。然后，当您希望显示单列视图并完全隐藏其他img元素或right-columndiv 时，使用媒体查询使其可见。

于 2013-12-02T11:32:20.510 回答
0

在查看您的 HTML 时，桌面设备和移动设备似乎都将显示相同的内容，只是给 div 的类名不同。

如果你这样做，我的建议是：保持 div 的相同名称，不要重复。就像您隐藏 div 一样，为不同的屏幕（媒体查询）编写单独的样式。尝试以百分比形式编写样式，以便在移动设备中只有少数元素需要单独的样式。

eg: 
/* Desktop styles */
@media screen and (max-width: 600px)
{
    /* Styles for elements upto 600  */
}
于 2013-08-07T09:32:02.183 回答
0

如果针对桌面和移动设备，我会考虑构建一个响应式设计（如果可能的话），因为这确实节省了大量时间并提供了一个优雅的解决方案。但是，根据您的问题，这根本不是一个坏习惯，如果您有不同的内容集，则可以接受。许多大型产品公司都使用了这种方法。

请检查此链接，可能会有所帮助 - http://mobile.smashingmagazine.com/2012/07/19/do-mobile-desktop-interfaces-belong-together/

于 2013-08-07T09:36:26.003 回答