Question

我在我的iPhone上为这个位于页面底部的网站小时部分的HTML苦苦挣扎。桌面网站的运营时间看起来很棒，但移动版看起来很糟糕。您可以通过将水平浏览器减少到小于968px左右来查看它。两者之间只有巨大的空间。

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

非常感谢任何帮助。

＆＃13;

<p>
    <strong></strong>
    <div class="flex_column av_one_fourth first  el_before_av_one_half">Monday</div>
    <div class="flex_column av_one_fourth el_after_av_one_fourth">6 AM - 10 PM</div>

    <div class="flex_column av_one_fourth first  el_before_av_one_half">Tuesday</div>
    <div class="flex_column av_one_fourth el_after_av_one_fourth">6 AM - 10 PM</div>
    
    <div class="flex_column av_one_fourth first  el_before_av_one_half">Wednesday</div>
    <div class="flex_column av_one_fourth el_after_av_one_fourth">6 AM - 10 PM</div>
    
    <div class="flex_column av_one_fourth first  el_before_av_one_half">Thursday</div>
    <div class="flex_column av_one_fourth el_after_av_one_fourth">6 AM - 10 PM</div>
    
    <div class="flex_column av_one_fourth first  el_before_av_one_half">Friday</div>
    <div class="flex_column av_one_fourth el_after_av_one_fourth">6 AM - 10 PM</div>
    
    <div class="flex_column av_one_fourth first  el_before_av_one_half">Saturday</div>
    <div class="flex_column av_one_fourth el_after_av_one_fourth">8 AM - 10 PM</div>
    
    <div class="flex_column av_one_fourth first  el_before_av_one_half">Sunday</div>
    <div class="flex_column av_one_fourth el_after_av_one_fourth">8 AM - 8 PM</div>
    
</p>

＆＃13;

Answer 1

首先，正如建议的那样，您应该清理HTML，并且可能从基础开始。

首先，您不能在段落标记内放置div。您将在自己的网站上看到，您的浏览器会自动关闭一个空的

标记。

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

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

现在，您可以为每个行分配一个类，并将该样式设置为100％宽度。然后，每个div内部，你可以设置为内联块，宽度为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%;
}

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

http://jsfiddle.net/jyyg5f62/

CSS断点是736px，这是纵向模式下iPhone 5s（和类似）尺寸屏幕的宽度。当浏览器检测到此宽度时，新的CSS样式将接管。在这种情况下，它会交换内联块以进行阻止，因此每天和每个时间都在他们自己的行上。当视口扩展时，它们会并排显示。

Answer 2

如果你想让他们在同一条线上，我建议把日期和时间放在同一个div中。如果您希望它们离得更近，请减少移动设备上日期和时间的最低限度。

Answer 3

关于开发移动（又名＆＃34;响应式＆＃34;）网站的一些提示。

在DIV中使用DIV内的DIV。将您的页面分成DIV中包含的部分。将外部DIV宽度设置为百分比，高度自动（或像素）。在外部DIV内部，应该是将屏幕空间分成所需百分比（宽度）的其他DIV。参见参考文章（下）重新流体网格。
此外，所有图片的大小应相同 - 宽度为百分比。这样，随着视图大小的变化，图像/ etc将根据容器的大小调整，也可以适当调整大小。
em和/或百分比中的字体大小。
使用Chrome通过以下方式在各种移动设备上查看您的网站：
- 按F12（开发工具）
- 在“开发工具”窗口的左上角，放大镜图标旁边，单击iPhone图标。看看Chrome中的页面会发生什么。注意几乎在左上方你可以设置设备：iPhone5，例如

您可以使用此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
    }
}

如果你这样做 - 使用宽度为百分比的DIV和IMG，则不需要使用jQuery / js来播放大小。

参考文献：

http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

响应式移动版网站上的HTML

3 个答案: