1. 首頁
  2. 問答
  3. 與響應式設計的問題

與響應式設計的問題

2013-10-18 81 views
-1

我想讓位於位置頁面上的位置表上的表格適合其父元素，當它低於480px。我的CSS中的媒體查詢檢查250像素 - 780像素，但由於某種原因低於480，它開始脫離屏幕，並在其父元素之外。任何幫助將不勝感激。與響應式設計的問題

網站：http://www.okatod.org

這裏是HTML

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>OKATOD</title> 
     <meta charset="utf-8" /> 

     <!-- My Work Machine --> 
     <!-- <link rel="stylesheet" href="C:\Users\fitzst\Desktop\OKATOD\CSS2\locationsTheme.css" type="text/css" /> --> 

     <!-- My Personal Pc --> 
     <!-- <link rel="stylesheet" href="G:\OKATOD\Better OKATOD Website\CSS2\locationsTheme.css" type="text/css" /> --> 

     <!-- Server --> 
     <link rel="stylesheet" href="CSS2/locationsTheme.css" type="text/css" /> 
     <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> --> 
     <meta name="viewport" content="width=device-width; maximum-scale=1; minimum-scale=1;" /> 

    </head> 


    <body class="body"> 

     <header class="mainHeader"> 
      <img src="img/logo.gif"> 
      <nav><ul> 
       <li><a href="http://www.okatod.org/index.html">Home</a></li> 
       <li><a href="#">About Us</a></li> 
       <li class="active"><a href="http://www.okatod.org/Locations.html">Locations</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul></nav> 
     </header> 

     <div class="mainContent"> 
      <div class="content"> 
        <article class="topcontent">  
         <header> 
          <h2><a href="#" rel="bookmark" title="Permalink to this POST TITLE">OKATOD Locations</a></h2> 
         </header> 

         <table class="locationsTable"> 
          <tr class="tableHeadings"> 
           <th>Name</th> 
           <th>Street Address</th> 
           <th>City</th> 
           <th>State</th> 
           <th>Zip Code</th> 
           <th>Phone Number</th> 
          </tr> 
          <tr> 
           <td>Behavorial Health Group</td> 
           <td>5401 SW 29th</td> 
           <td>Oklahoma</td> 
           <td>OK</td> 
           <td>73128</td> 
           <td>(405)-681-2003</td> 
          </tr> 
          <tr> 
           <td>Southern Oklahoma Treatment Services</td> 
           <td>905 Holiday Dr.</td> 
           <td>Ardmore</td> 
           <td>OK</td> 
           <td>73401</td> 
           <td>(580)-745-9083</td> 
          </tr> 
          <tr> 
           <td>Southern Oklahoma Treatment Services</td> 
           <td>5912 US Hwy 70</td> 
           <td>Mead</td> 
           <td>Ok</td> 
           <td>73449</td> 
           <td>(580)-942-7650</td> 
          </tr> 
          <tr> 
           <td>Rightway Medical</td> 
           <td>9017 South I-35 Service Road</td> 
           <td>Oklahoma City</td> 
           <td>Ok</td> 
           <td>73160</td> 
           <td>(405)-616-3366</td> 
          </tr> 
          <tr> 
           <td>Quapaw Counseling Servies</td> 
           <td>58150 East 66 Road</td> 
           <td>Miami</td> 
           <td>Ok</td> 
           <td>74354</td> 
           <td>(918)-542-1786</td> 
          </tr> 
          <tr> 
           <td>Rightway Medical of Bartlesville</td> 
           <td>610 W. Hensley Blvd</td> 
           <td>Bartlesville</td> 
           <td>Ok</td> 
           <td>74003</td> 
           <td>(918)-337-6007</td> 
          </tr> 
          <tr> 
           <td>Rightway Medical of Roland</td> 
           <td>117 E. Ray Fine Blvd</td> 
           <td>Bartlesville</td> 
           <td>Ok</td> 
           <td>74954</td> 
           <td>(918)-427-3344</td> 
          </tr> 
          <tr> 
           <td>Tulsa Rightway Medical</td> 
           <td>3445 S Sheridan Road E</td> 
           <td>Tulsa</td> 
           <td>Ok</td> 
           <td>74145</td> 
           <td>(918)-610-3366</td> 
          </tr> 
          <tr> 
           <td>Oklahoma City Veterans Administration Medical</td> 
           <td>921 Northeast 13th St.</td> 
           <td>Oklahoma City</td> 
           <td>Ok</td> 
           <td>73104</td> 
           <td>(405)-456-2858</td> 
          </tr> 
          <tr> 
           <td>Mission Treatment Centers, Inc.</td> 
           <td>5550 South Garnett</td> 
           <td>Tulsa</td> 
           <td>Ok</td> 
           <td>74146</td> 
           <td>(918)-665-2501</td> 
          </tr> 
          <tr> 
           <td>Keetoowah Cherokee Treatment Services</td> 
           <td>2727 East Admiral Place</td> 
           <td>Tulsa</td> 
           <td>Ok</td> 
           <td>74110</td> 
           <td>(918)-835-3017</td> 
          </tr> 
          <tr> 
           <td>Advanced Recovery Services</td> 
           <td>301 SE 59th St</td> 
           <td>Oklahoma City</td> 
           <td>Ok</td> 
           <td>73129</td> 
           <td>(405)-672-3033)</td> 
          </tr> 
         </table> 




        </article> 
      </div> 
     </div> 

     <footer class="mainFooter"> 
      <p>Copyright &copy; 2013 <a href="http://OKATOD.org">OKATOD</a></p> 
     </footer> 

    </body> 
</html>

這裏是CSS：

/* 
    Theme Name: index Theme HTML5/CSS3 Layout 
    Description: Basic HTML5/CSS3 layout built on a responsive framework 
    Version: 1.0 
    Author URL: Trevor Fitzsimmons 
*/ 

/* =========================== 
    ======= Body style ======== 
    =========================== */ 

body { 
     background-image: url('http://www.okatod.org/Images/bg.png'); 
    color: #000305; 
    font-size: 87.5%; /* Base font size: 14px */ 
    font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
    line-height: 1.429; 
    margin: 0; 
    padding: 0; 
    text-align: left; 
    } 

.body { 
     clear: both; 
    margin: 0 auto; 
    width: 70%; 
} 

/* =========================== 
    ========= Headings ======== 
    =========================== */ 
h2 {font-size: 1.571em} /* 22px */ 
h3 {font-size: 1.429em} /* 20px */ 
h4 {font-size: 1.286em} /* 18px */ 
h5 {font-size: 1.143em} /* 16px */ 
h6 {font-size: 1em}  /* 14px */ 

h2, h3, h4, h5, h6 { 
    font-weight: 400; 
    line-height: 1.1; 
    margin-bottom: .8em; 
} 

/* =========================== 
    ======= Anchor style ====== 
    =========================== */ 
a { 
    outline: 0; 
    } 

a img { 
    border: 0px; 
    text-decoration: none; 
} 

a:link, a:visited { 
    color: #CF5C3F; 
    padding: 0 1px; 
    text-decoration: none; 
} 

a:hover, a:active { 
    background-color: #CF5C3F; 
    color: #fff; 
    text-decoration: none; 
} 

/* =========================== 
    ===== Main Navigation ===== 
    =========================== */ 

.mainHeader nav { 
    background: #666; 
    font-size: 1.143em; 
    height: 40px; 
    line-height: 30px; 
    margin: 0 auto 30px auto; 
    text-align: center; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
} 

.mainHeader nav ul { 
    list-style: none; 
    margin: 0 auto; 
} 

.mainHeader nav ul li { 
    float: left; 
    display: inline; 
} 

.mainHeader nav a:link, .mainHeader nav a:visited { 
    color: #fff; 
    display: inline-block; 
    height: 30px; 
    padding: 5px 23px; 
    text-decoration: none; 
} 
.mainHeader nav a:hover, .mainHeader nav a:active, 
.mainHeader nav .active a:link, .mainHeader nav .active a:visited { 
    background: #CF5C3F; 
    color: #fff; 
    text-shadow: none !important; 
} 

.mainHeader nav li a { 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
} 

.mainHeader img { 
    width: 10%; 
    height: auto;%; 
    margin: 3% 0; 
} 

/* =========================== 
    ======= Content Area ====== 
    =========================== */ 

.mainContent { 
    overflow: hidden; 
    line-height: 25px; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;   
} 

.topcontent { 
    background-color: #FFF; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    padding: 3% 5%;   
    text-align: center; 
} 

.topcontent header { 
    margin-top: -20px; 
} 

.locationsTable{ 
    border-collapse: collapse; 
} 

.tableHeadings { 
    margin-right: 5px; 
} 

.locationsTable th { 
    margin-right: 5px; 
} 

.locationsTable td { 
    margin-bottom: 5px; 
    border: 2px solid #444; 
} 

.bottomcontent { 
    background-color: #FFF; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    padding: 3% 5%; 
} 

.content { 
    width: 100%; 
    float: left; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
} 

.post-info { 
    font-style: italic; 
    color: #999; 
    font-size: 85%; 
} 

/* =========================== 
    ======== Sidebar ========== 
    =========================== */ 

.top-sidebar { 
    width: 24%; 
    float: left; 
    margin-left: 2%; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    background-color: #FFF; 
    padding: 2% 3%; 
    margin-bottom: 2%; 
} 

.middle-sidebar { 
    width: 24%; 
    float: left; 
    margin-left: 2%; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    background-color: #FFF; 
    padding: 2% 3%; 
    margin-bottom: 2%; 
} 

.bottom-sidebar { 
    width: 24%; 
    float: left; 
    margin-left: 2%; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    background-color: #FFF; 
    padding: 2% 3%; 
} 

/* =========================== 
    ========= Footer ========== 
    =========================== */ 

.mainFooter { 
    width: 100%; 
    float: left; 
    margin-top: 2%; 
    margin-bottom: 2%; 
    padding-left: 0; 
    background-color: #666; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    color: #FFF;  
} 

.mainFooter p { 
    width: 91%; 
    margin: 2% auto; 
} 

/* =========================== 
    ====== Media Queries ====== 
    =========================== */ 

@media only screen and (min-width : 150px) and (max-width : 780px) 
{ 
    .body { 
     clear: both; 
     margin: 0 auto; 
     width: 90%; 
     font-size: 90%; 
    } 

    .mainHeader nav { 
     background: #666; 
     font-size: 1.143em; 
     height: 160px; 
     line-height: 30px; 
     margin-bottom: 0; 
     border-radius: 5px; 
     -moz-border-radius: 5px; 
     -webkit-border-radius: 5px; 
    } 

    .mainHeader nav ul { 
     list-style: none; 
     margin: 0 auto; 
     padding-left: 0; 
    } 

    .mainHeader nav li { 
     margin-left: 0 auto; 
     width: 100%; 
    } 

    .mainHeader nav a:link, .mainHeader nav a:visited { 
     color: #FFF; 
     display: block; 
     height: 30px; 
     padding: 5px 0; 
     text-decoration: none; 
    } 

    .mainHeader nav a:active, 
    .mainHeader nav .active a:link, .mainHeader nav .active a:visited { 
     background: #CF5C3F; 
     color: #fff; 
     text-shadow: none !important; 
    } 

    .mainHeader nav li a { 
     border-radius: 5px; 
     -moz-border-radius: 5px; 
     -webkit-border-radius: 5px; 

     border-radius: 5px; 
     -moz-border-radius: 5px; 
     -webkit-border-radius: 5px; 
    } 

    .mainHeader img { 
     width: 100%; 
     height: auto; 
     margin-bottom: 3%; 
    } 

    .mainContent { 
     overflow: hidden; 
     line-height: 25px; 
     border-radius: 5px; 
     -moz-border-radius: 5px; 
     -webkit-border-radius: 5px; 
     margin-top: 4%; 
     margin-bottom: 2%; 
    } 

    .topcontent { 
     background-color: #FFF; 
     border-radius: 5px; 
     -moz-border-radius: 5px; 
     -webkit-border-radius: 5px; 
     padding: 2% 5%; 
     margin-bottom: 4%; 
    } 

    .bottomcontent { 
     background-color: #FFF; 
     border-radius: 5px; 
     -moz-border-radius: 5px; 
     -webkit-border-radius: 5px; 
     padding: 2% 5%; 
    } 

    .content { 
     width: 100%; 
     float: left; 
     border-radius: 5px; 
     -moz-border-radius: 5px; 
     -webkit-border-radius: 5px; 
    } 

    .post-info { 
     display: none; 
    } 

    .top-sidebar { 
     width: 86%; 
     float: left; 
     border-radius: 5px; 
     -moz-border-radius: 5px; 
     -webkit-border-radius: 5px; 
     background-color: #FFF; 
     margin-top: 4%; 
     margin-left: 0; 
     padding: 0 7%; 
     margin-bottom: 0;  
    } 

    .top-sidebar p { 
     width: 90%; 
    } 

    .middle-sidebar { 
     width: 86%; 
     float: left; 
     border-radius: 5px; 
     -moz-border-radius: 5px; 
     -webkit-border-radius: 5px; 
     background-color: #FFF; 
     margin-top: 4%; 
     margin-left: 0; 
     padding: 0 7%; 
     margin-bottom: 0; 
    } 

    .middle-sidebar p { 
     width: 90%; 
    } 

    .bottom-sidebar { 
     width: 86%; 
     float: left; 
     border-radius: 5px; 
     -moz-border-radius: 5px; 
     -webkit-border-radius: 5px; 
     background-color: #FFF; 
     margin-top: 4%; 
     margin-left: 0%; 
     padding: 0 7%; 
     margin-bottom: 1%; 
    } 

    .bottom-sidebar p { 
     width: 90%; 
    } 

    .mainFooter { 
     width: 100%; 
     float: left; 
     margin: 2% 0; 
     padding-left: 0; 
     background-color: #666; 
     border-radius: 5px; 
     -moz-border-radius: 5px; 
     -webkit-border-radius: 5px; 
     color: #FFF;  
    } 

    .mainFooter p { 
     width: 86%; 
     margin: 2% auto; 
    } 
}

來源

2013-10-18 user2425527

+0

'<元的charset =「utf-8」 />'應'< meta charset =「utf-8」>'（XHTML除外） – DanFromGermany

+0

謝謝！我不知道這是有所作爲。 – user2425527

回答

0

嗨它的真正棘手的管理「表數據」和自適應設計，發生什麼事在這裏是你的話不能在更多的斷行這就是表格利用的原因。溶液不美麗，但它是一個解決方案是在與媒體查詢性能的一些變化包括我這個

@media only screen and (min-width : 150px) and (max-width : 480px) 
    { 
     .locationsTable tr td{ 
      word-break:break-all; 
      line-height:20px; 
      font-size:70%; 
    }

所以，你可以試試這個位置http://jsfiddle.net/C2wP6/

我有一些事情：

  • 字體大小，你可以減少它。
  • 線高你也可以減少它以獲得更多的空間。
  • 字斷迫使任何部分打破字（不是一個好的解決方案，但是是唯一一個我看到）

來源

2013-10-18 13:12:11 DaniP

+0

我試過這個，但似乎沒有工作。我曾看過教程中的單詞中斷，並認爲它可以工作，但這是我第一次嘗試它。感謝壽！ – user2425527

+0

我認爲Saravanan對他的評論可能是正確的。 – user2425527

+0

單詞包裝似乎無法正常工作 – user2425527

0

甲<table>具有定義的最小寬度。在你的情況下，像行政管理，東北和巴特爾斯維爾構成一個特定的寬度。那些列的寬度不能減少。 整體min-width你的<table>超過480px。

有一個選項可以打開它們。在一個小於480px的屏幕中，爲每列指定一個寬度，並使其適合低於480px。然後打破寬度超過指定值的單詞。例如。管理員。這將顯示如

Admin- 
istrator

從而降低<table>的總寬度。

來源

2013-10-18 12:48:48 Saravanan

+0

這是通過css完成的嗎？ – user2425527

0

當您處理表格和響應式設計時，可能需要考慮迴流數據。

這方面的例子可以看出：

http://api.jquerymobile.com/table-reflow/

來源

2013-10-18 12:51:00 sixsixninenine

+0

感謝您的建議，我試圖堅持基本的CSS3和HTML5，因爲這是一個基本的網站。如果這是最後的手段，我會考慮這一點。我感謝你的幫助！ – user2425527

相關問題

 相關問題