网站的响应移动版本上的HTML

我在iPhone上挣扎了好几个小时，在页面底部的网站部分。桌面网站的运行时间看起来不错，但移动版看起来很糟糕。您可以通过将水平浏览器缩小到968px左右来查看它。时代之间只有巨大的空间

我目前正在wordpress文本小部件中使用以下代码。我们正在努力使它保持一致

任何帮助都将不胜感激

星期一
上午六时至晚上十时
星期二
上午六时至晚上十时
星期三
上午六时至晚上十时
星期四
上午六时至晚上十时
星期五
上午六时至晚上十时
星期六
上午八时至晚上十时
星期日
上午八时至晚上八时

如果你想让它们在同一行，我建议将日期和时间放在同一个分区中。如果你想让它们更近一些，在移动设备上减少时间顶部和日期底部的边距。

首先，正如建议的那样，你应该清理HTML，也许可以从基础开始

首先，不能在段落标记中放置大量div。你会在你的网站上看到，你会有一个空的标签，它会被你的浏览器自动关闭

其次，我会将每一行放入它自己的容器div中，然后为每天放置一个div，并在其中放置时间

<div>
    <div>Monday</div>
    <div>6am - 10pm</div>
</div>
<div>
    <div>Tuesday</div>
    <div>6am - 10pm</div>
</div>
etc

星期一
上午6时至晚上10时
星期二
上午6时至晚上10时
等

现在，您可以为每条线指定一个类，并将该样式设置为100%宽度。 然后，内部的每个div都可以设置为inline block，宽度为50%

<div class="item">
    <div class="day">Monday</div>
    <div class="times">6am - 10pm</div>
</div>

.item {
    display:block;
    width:100%;
}
.item .day, .item .times {
    display:inline-block;
    width:49.9%;
}

星期一
上午6时至晚上10时
.项目{
显示：块；
宽度：100%；
}
.item.day、.item.times{
显示：内联块；
宽度：49.9%；
}

下面是我创建的一个快速示例，展示了媒体查询在这种情况下的工作方式，以及命名div和正确标记

---

CSS断点是736px，这是iPhone 5s（和类似）大小的屏幕在纵向模式下的宽度。当浏览器检测到这个宽度时，新的CSS样式将接管。在本例中，它将内联块交换为块，因此每天和时间都在各自的行上。当视口展开时，它们会并排出现。

关于开发移动（又称“响应”）站点的一些提示

在div中使用div在div中使用div。将页面拆分为包含在div中的部分。将外部分割宽度设置为百分比、自动高度（或像素）。在外部分区的内部，应该是根据所需百分比（宽度）划分屏幕空间的其他分区。关于流体网格，请参见参考文章（底部）

此外，所有图像的大小应该相同——宽度为百分比。这样，随着视图大小的更改，图像/etc将根据容器的大小进行适当调整，容器也将相应调整大小

以em和/或百分比表示的字体大小

使用Chrome通过以下方式在各种移动设备上查看您的网站：

• 按F12键（开发工具）
• 在“开发工具”窗口的左上角，在放大镜图标旁边，单击iPhone图标。看看Chrome中的页面发生了什么。注：在左上角，您可以设置设备：例如，iPhone 5

您可以使用此jQuery/js策略专门为各种大小的屏幕调整div等的大小：

$(function() {
    win_size_recalc();

    $(window).on('resize', function(){
        win_size_recalc();
    });
});

你的recalc fn可以是这样的：

function win_size_recalc(){
    ww = $(window).width();
    if (ww <= 550){
        $('#header').css({'height':'50px'});
        $('nav').css({'height':'55px', 'width':'98%'});
        $('#main').css({'width':'98%'});
        $('#footer').css({'width':'98%'});
    }else if (ww <= 650){
        //etc
    }
}

函数win\u size\u recalc（）{
ww=$（window.width（）；
如果（ww）使用表格数据。也可以使用HTML。您可以在CSS上使用@media查询来为具有特定窗口大小的移动设备制定规则。您可以尝试引导吗？