響應式移動網站上的HTML

Question

在頁面底部網站的小時部分中，我在iPhone上的HTML內容中苦苦掙扎。 桌面站點的運行時間看起來不錯，但是移動版本看起來很糟糕。 您可以通過將水平瀏覽器縮小到小於968px來查看它。 時間之間只有巨大的空間。

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

任何幫助將非常感激。

 <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> 

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樣式將接管。 在這種情況下，它將inline-block換為block，因此每一天和每一天都在各自的行上。 視口展開時，它們會並排出現。

Answer 2

如果您希望它們位於同一行，則建議將日期和時間放在同一div中。 如果您希望它們更近一些，請減少移動設備上時間頂部和日期底部的邊距。

Answer 3

開發移動（又稱“響應式”）網站的一些技巧。

1. 在DIV中的DIV中使用DIV。 將頁面分為DIV中包含的部分。 將外部DIV寬度設置為百分比，自動設置高度（或設置為像素）。 固定在外部DIV內的應該是其他DIV，這些DIV會將屏幕空間划分為所需的百分比（寬度）。 請參閱參考文章（底部）和流體網格。

2. 同樣，所有圖像的尺寸都應采用相同的方式-寬度等於百分比。 這樣，隨着視圖大小的變化，圖像/等將被調整為適合容器的大小，容器也將被適當調整大小。

3. 字體大小，以em和/或百分比為單位。

4. 使用Chrome通過以下方式在各種移動設備上查看您的網站：

   • 按F12（Dev Tools）
   • 在“開發工具”窗口的左上方，在放大鏡圖標旁邊，單擊iPhone圖標。 查看Chrome中的頁面發生了什么。 請注意，您可以在左上角設置設備：iPhone5，例如

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
    }
}

但是，如果您做對了-使用寬度作為百分比的DIV和IMG，就無需使用jQuery / js來處理大小。

參考文獻：

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