响应式网站内容宽度比视口宽度宽

时间：2017-03-22 10:05:33

标签： css html5 css3 responsive-design

好的，我正在研究一个小模板并尝试学习响应式网站开发。我在测试时遇到问题，看看它是否是移动响应，他们声明：

  

内容宽度比视口宽度▾宽   视口宽度：320像素，内容宽度：563像素

但是我似乎无法从我的样式表中解决问题是什么？

body {
  background-color: #f1f1f1;
}

.wrapper {
  margin: 0 auto;
  padding: 0 20px 20px 20px;
  max-width: 1080px;
  min-width: 200px;
  background-color: #ffffff;
  height: 100%;
}

.header {
  width: 100%;
  height: 100px;
}

.header-right {
  float: right;
  height: 15px;
  padding: 24px 40px 20px 5px;
  margin-bottom: 30px;
}

.logo {
  float: left;
  display: block;
  max-width: 100%;
  max-height: 100%;
  border: 0;
}

.call-us {
  padding-right: 20px;
  max-width: 100%;
}

.cartImg {
  max-width: 40px;
  max-height: 40px;
}


/*MEDIA QUERY at 676 to 808px*/

@media (min-width: 676px) and (max-width: 808px) {
  .logo {
    float: left;
    display: block;
    max-width: 100%;
    margin-left: 25%;
    border: 0;
  }
}

@media (min-width: 676px) and (max-width: 808px) {
  .call-us {
    float: left;
    display: block;
    margin-right: 25%;
    max-width: 100%;
  }
}

@media (min-width: 676px) and (max-width: 808px) {
  .cartImg {
    float: left;
    margin-left: 25%;
    margin-top: 10px;
  }
}


/*MEDIA QUERY at 330 to 456px*/

@media (min-width: 330px) and (max-width: 456px) {
  .call-us {
    float: left;
    display: block;
    margin-left: 45px;
    max-width: 100%;
  }
}

@media (min-width: 330px) and (max-width: 456px) {
  .cartImg {
    float: left;
    margin-left: 50%;
    margin-top: 10px;
  }
}


/*MEDIA QUERY at 279 to 330px*/

@media (min-width: 279px) and (max-width: 330px) {
  .call-us {
    float: left;
    display: block;
    margin-left: 20px;
    max-width: 100%;
  }
}

@media (min-width: 279px) and (max-width: 330px) {
  .cartImg {
    float: left;
    margin-left: 50%;
    margin-top: 10px;
  }
}

.main {
  width: 100%;
  font-family: Segoe UI, Arial;
}

p {
  font-family: Segoe UI, Arial;
  font-size: 16px;
}

h1 {
  text-transform: uppercase;
  font-family: Segoe UI, Arial;
  font-weight: bold;
  letter-spacing: -0.5px;
  clear: both;
  text-align: center;
}

.styleBottomRed {
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  color: #FFFFFF;
  text-transform: uppercase;
  font-family: Segoe UI, Arial;
  font-weight: bold;
  letter-spacing: -0.5px;
  background-color: #204393;
  border-left: 2px solid white;
  text-align: center;
}

.tab_content_main {
  padding: 0 15px;
  background-color: #F1F1F1;
}

.prod-img {
  max-width: 100%;
  max-height: 100%;
}

hr {
  display: block;
  position: relative;
  padding: 0;
  margin: 8px auto;
  height: 0;
  width: 100%;
  line-height: 0;
  clear: both;
  border: none;
}

.bottomTabs {
  font-size: 20px;
  font-family: Segoe UI, Arial;
  font-weight: bold;
  height: 55px;
  max-height: 55px;
  text-align: center;
  color: white;
  background-color: #204393;
}

#iconImg {
  float: right;
  max-width: 40px;
  max-height: 40px;
}

.bottomTabsUL,
ul,
li {
  list-style-type: square;
  font-size: 16px;
  text-align: left;
}


/*MEDIA QUERY at 866 to 2000px hide different content and show other*/

@media screen and (min-width: 866px) and (max-width: 2000px) {
  .bottomTabs {
    display: none;
  }
  /* hide it elsewhere */
}

@media screen and (min-width: 866px) and (max-width: 2000px) {
  .bottomTabsUL,
  {
    display: none;
  }
  /* hide it elsewhere */
}

@media screen and (min-width: 866px) and (max-width: 2000px) {
  .tdMobile {
    display: none;
  }
  /* hide it elsewhere */
}

@media screen and (min-width: 0px) and (max-width: 866px) {
  section {
    display: none;
  }
  /* hide it elsewhere */
}


/*TAB CSS*/

* {
  box-sizing: border-box;
}

section {
  position: relative;
  width: 100%;
  margin: 0 auto;
  z-index: 0;
  color: white;
}

section:after {
  content: 'your message goes here';
  position: absolute;
  left: 0;
  top: 45px;
  font-size: 16px;
  text-align: left;
  background-color: #F1F1F1;
  padding: 8px 20px 20px 20px;
  max-width: 100%;
  min-width: 200px;
  min-height: 125px;
  color: black;
}

button {
  cursor: pointer;
  width: 199px;
  display: inline-block;
  background-color: #204393;
  color: white;
  text-align: center;
  transition: .25s ease;
  border: none;
  padding: 10px;
  font-size: 18px;
  margin-bottom: 145px;
}

.divTab:focus button,
button:focus {
  background-color: #EE2725;
  outline: none;
  font-size: 18px;
}

.tabP {
  display: none;
  font-size: 16px;
  padding: 20px 20px 20px 20px;
}

button:focus+.tabP,
.divTab:focus P {
  display: block;
  position: absolute;
  background-color: #F1F1F1;
  width: 100%;
  min-width: 200px;
  min-height: 150px;
  left: 0;
  color: black;
  z-index: 2;
  outline: none;
  top: 29px;
  text-align: left;
  padding-top: 8px;
}

.divTab {
  display: inline-block;
}

.divTab:focus {
  outline: none;
}

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {
  background: #f8f8f8;
  padding: 0px;
}

table th,
table td {
  padding: 10px;
  text-align: center;
}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: #204393;
  color: white;
}

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }
  table caption {
    font-size: 1.3em;
  }
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: 15px;
  }
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  table td:before {
    /*
                    * aria-label has no advantage, it won't be read inside a table
                    content: attr(aria-label);
                    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  table td:last-child {
    border-bottom: 0;
  }
}
<div class="wrapper">
  <div class="header">

    <a href="http://" target="_blank"><img class="logo" alt="Store" title="Store" src="http://placehold.it/350x150?text=Logo" /></a>

    <div class="header-right">
      <a href="tel:0000000000"><img class="call-us" alt="Call Us" title="Call Us" src="http://placehold.it/100x30?text=Call+Us" /></a>
      <a href="http://" target="_blank"><img class="cartImg" alt="Cart Image" title="CartImg" src="http://placehold.it/40x40?text=Cart" /></a>
    </div>

  </div>

  <hr>
  <div class="main">
    <hr>
    <h1>{{ title }}</h1>

    <hr>
    <center><img class="prod-img" src="http://placehold.it/100x100?text=Product+Image" width="20%" /></center>
    <hr>

    <p>{{ description }}</p>

    <ul>
      <li>CONTENT GOES HERE</li>
    </ul>

    <table>
      <tbody>
        <caption>Specification</caption>
        <thead>
          <tr>
            <th scope="col">Model</th>
            <th scope="col">Size</th>
            <th scope="col">Weight</th>
            <th scope="col">Platform Height</th>
            <th scope="col">Overall Height</th>
            <th scope="col">Width</th>
          </tr>
        </thead>
      </tbody>
      <tbody>
        <tr>
          <td data-label="Model">CONTENT GOES HERE</td>
          <td data-label="Size">CONTENT GOES HERE</td>
          <td data-label="Weight">CONTENT GOES HERE</td>
          <td data-label="Platform Height">CONTENT GOES HERE</td>
          <td data-label="Overall Height">CONTENT GOES HERE</td>
          <td data-label="Width">CONTENT GOES HERE</td>
        </tr>

      </tbody>
    </table>

    <br>

    <!--Footer tabs for selecting payment, delivery, returns and warranty.-->
    <section>
      <div class="divTab">
        <button>Payment</button>
        <p class="tabP">CONTENT GOES HERE.</p>
      </div>
      <div class="divTab">
        <button>Delivery</button>
        <p class="tabP">CONTENT GOES HERE.</p>

      </div>
      <div class="divTab">
        <button>Returns</button>
        <p class="tabP">CONTENT GOES HERE.</p>
      </div>
      <div class="divTab">
        <button>Warranty</button>
        <p class="tabP">CONTENT GOES HERE.</p>
      </div>
    </section>


    <!--Footer tabs for Mobile application compatibility. selecting payment, delivery, returns and warranty.-->
    <table style="width:100%; text-align:center;">

      <tr>
        <td class="bottomTabs">Payment</td>
      </tr>
      <tr>
        <td class="tdMobile" style="text-align: left;">
          <p>CONTENT GOES HERE.</p>
        </td>
      </tr>

      <tr>
        <td class="bottomTabs">Delivery</td>
      </tr>
      <tr>
        <td class="tdMobile" style="text-align: left;">
          <p>CONTENT GOES HERE.</p>
          <ul class="bottomTabsUL">
            <li>CONTENT GOES HERE.</li>
            <li>CONTENT GOES HERE.</li>
          </ul>
        </td>
      </tr>

      <tr>
        <td class="bottomTabs">Returns</td>
      </tr>
      <tr>
        <td class="tdMobile" style="text-align: left;">
          <p>CONTENT GOES HERE.</p>
      </tr>

      <tr>
        <td class="bottomTabs">Warranty</td>
      </tr>
      <tr>
        <td class="tdMobile" style="text-align: left;">
          <p>CONTENT GOES HERE.</p>
        </td>
      </tr>
    </table>
  </div>
</div>

问题

好的，所以我决定测试并拿出零件，注意到该表导致了问题。但是，我不明白的是我在样式表中设置了表属性，使其与响应式Web兼容。

<table>
      <tbody>
        <caption>Specification</caption>
        <thead>
          <tr>
            <th scope="col">Model</th>
            <th scope="col">Size</th>
            <th scope="col">Weight</th>
            <th scope="col">Platform Height</th>
            <th scope="col">Overall Height</th>
            <th scope="col">Width</th>
          </tr>
        </thead>
      </tbody>
      <tbody>
        <tr>
          <td data-label="Model">CONTENT GOES HERE</td>
          <td data-label="Size">CONTENT GOES HERE</td>
          <td data-label="Weight">CONTENT GOES HERE</td>
          <td data-label="Platform Height">CONTENT GOES HERE</td>
          <td data-label="Overall Height">CONTENT GOES HERE</td>
          <td data-label="Width">CONTENT GOES HERE</td>
        </tr>

      </tbody>
    </table>

1 个答案:

答案 0 :(得分：0)

因为桌子而发生。它不能缩小更多

你有几个解决方案

  1. 减少td字体大小（但如果您有多列，则无法工作）
  2. 你可以将表格包裹在div中，给出div溢出滚动和最大宽度100vw（可选择你可以在手机上显示文字说：＆＃39;向右滚动或旋转你的设备看全表）

    3. 请参阅解决方案2或jsfiddle

    下面的代码段

    让我知道它是否有效：D欢呼

    ＆＃13;
    ＆＃13; 
    body {
  background-color: #f1f1f1;
}

.wrapper {
  margin: 0 auto;
  padding: 0 20px 20px 20px;
  max-width: 1080px;
  min-width: 200px;
  background-color: #ffffff;
  height: 100%;
}

.header {
  width: 100%;
  height: 100px;
}

.header-right {
  float: right;
  height: 15px;
  padding: 24px 40px 20px 5px;
  margin-bottom: 30px;
}

.logo {
  float: left;
  display: block;
  max-width: 100%;
  max-height: 100%;
  border: 0;
}

.call-us {
  padding-right: 20px;
  max-width: 100%;
}
.tablewrapper { max-width:100vw;overflow-y:scroll}

@media only screen and (min-width: 768px) {
h3.showOnMobile { display:none;}
}
    ＆＃13; 
    <div class="wrapper">
  <div class="header">

    <a href="http://" target="_blank"><img class="logo" alt="Store" title="Store" src="http://placehold.it/350x150?text=Logo" /></a>

    <div class="header-right">
      <a href="tel:0000000000"><img class="call-us" alt="Call Us" title="Call Us" src="http://placehold.it/100x30?text=Call+Us" /></a>
      <a href="http://" target="_blank"><img class="cartImg" alt="Cart Image" title="CartImg" src="http://placehold.it/40x40?text=Cart" /></a>
    </div>

  </div>

  <hr>
  <div class="main">
    <hr>
    <h1>{{ title }}</h1>

    <hr>
    <center><img class="prod-img" src="http://placehold.it/100x100?text=Product+Image" width="20%" /></center>
    <hr>

    <p>{{ description }}</p>

    <ul>
      <li>CONTENT GOES HERE</li>
    </ul>
  <div class="tablewrapper">
    <h3 class="showOnMobile">scroll right or rotate your device to see full table</h3>
    <table>
      <tbody>
        <caption>Specification</caption>
        <thead>
          <tr>
            <th scope="col">Model</th>
            <th scope="col">Size</th>
            <th scope="col">Weight</th>
            <th scope="col">Platform Height</th>
            <th scope="col">Overall Height</th>
            <th scope="col">Width</th>
          </tr>
        </thead>
      </tbody>
      <tbody>
        <tr>
          <td data-label="Model">CONTENT GOES HERE</td>
          <td data-label="Size">CONTENT GOES HERE</td>
          <td data-label="Weight">CONTENT GOES HERE</td>
          <td data-label="Platform Height">CONTENT GOES HERE</td>
          <td data-label="Overall Height">CONTENT GOES HERE</td>
          <td data-label="Width">CONTENT GOES HERE</td>
        </tr>

      </tbody>
    </table>
    </div>

    <br>

    <!--Footer tabs for selecting payment, delivery, returns and warranty.-->
    <section>
      <div class="divTab">
        <button>Payment</button>
        <p class="tabP">CONTENT GOES HERE.</p>
      </div>
      <div class="divTab">
        <button>Delivery</button>
        <p class="tabP">CONTENT GOES HERE.</p>

      </div>
      <div class="divTab">
        <button>Returns</button>
        <p class="tabP">CONTENT GOES HERE.</p>
      </div>
      <div class="divTab">
        <button>Warranty</button>
        <p class="tabP">CONTENT GOES HERE.</p>
      </div>
    </section>


    <!--Footer tabs for Mobile application compatibility. selecting payment, delivery, returns and warranty.-->

   
 
    <table style="width:100%; text-align:center;">

      <tr>
        <td class="bottomTabs">Payment</td>
      </tr>
      <tr>
        <td class="tdMobile" style="text-align: left;">
          <p>CONTENT GOES HERE.</p>
        </td>
      </tr>

      <tr>
        <td class="bottomTabs">Delivery</td>
      </tr>
      <tr>
        <td class="tdMobile" style="text-align: left;">
          <p>CONTENT GOES HERE.</p>
          <ul class="bottomTabsUL">
            <li>CONTENT GOES HERE.</li>
            <li>CONTENT GOES HERE.</li>
          </ul>
        </td>
      </tr>

      <tr>
        <td class="bottomTabs">Returns</td>
      </tr>
      <tr>
        <td class="tdMobile" style="text-align: left;">
          <p>CONTENT GOES HERE.</p>
      </tr>

      <tr>
        <td class="bottomTabs">Warranty</td>
      </tr>
      <tr>
        <td class="tdMobile" style="text-align: left;">
          <p>CONTENT GOES HERE.</p>
        </td>
      </tr>
    </table>

  </div>
</div>
    ＆＃13;
    ＆＃13;
    ＆＃13;

相关问题
最新问题