Question

我有一个带有两列布局的网页，用于桌面屏幕，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 -->

然而，对于较小的屏幕，这种布局必须简化（一列，顶部＆gt;向下），但由于HTML的原始排序，我发现很难用媒体查询重新定位这些元素。对于较小的屏幕，我希望布局如下：

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

如您所见，我只想要一个div，<img>在<h1>和<p>元素之间移动。

如何实现仅在较小屏幕上显示的备用HTML布局？

Answer 1

如果您熟悉PHP，则应使用库（如http://mobiledetect.net/）来检测运行站点的设备，然后提供要显示的版本。

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

Answer 2

原始解决方案，但这个是无脚本的。

在左侧div中保留一个重复的img元素以及h1＆amp; p。默认情况下保留dislay:none。然后，当您希望显示单个列视图时，使用媒体查询使其可见。隐藏其他img元素或right-column div。

Answer 3

在查看HTML时，似乎桌面设备和移动设备都要显示相同的内容，只有类名称的差异才能给div。

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

eg: 
/* Desktop styles */
@media screen and (max-width: 600px)
{
    /* Styles for elements upto 600  */
}

Answer 4

我认为如果针对桌面和移动设备制作响应式设计（如果可能的话），因为这样可以节省大量时间并提供优雅的解决方案。但是，根据您的问题，这根本不是一种不好的做法，如果您有不同的内容集，则可以接受。许多大型产品公司都采用了这种方法。

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

如何重新排序/简化HTML代码以在较小的屏幕上显示？

4 个答案: