Question

我想尝试将其变成桌面平板电脑和移动电话的响应式设计，我很难让youtube视频响应 - 任何人都可以帮忙吗？非常感谢

我在想我需要为CSS做一些媒体查询，但我不确定如何做到这一点 - 真的很感激有人可以向我解释一下这是如何工作的

HTML：

.mytable {
  margin-bottom: 20px;
  font-family: "Helvetica", "Arial";
  border: none;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
}
.mytable td {
  color: #22313F;
  text-align: left;
  border-radius: 0.75em;
  font-weight: bold;
  padding: 0.4em 2em 0.7em 1.15em;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
  font-size: 0.9em;
}
.mytable tr {
  -webkit-transition: background 0.3s, box-shadow 0.3s;
  -moz-transition: background 0.3s, box-shadow 0.3s;
  transition: background 0.3s, box-shadow 0.3s;
}
#container {
  margin: 1em auto;
  max-width: 1500px;
  padding: 0;
  text-align: center;
  color: #22313F;
}
#principal,
aside {
  border-radius: 1em;
  display: inline-block;
  margin: 0.25em auto;
  max-width: 960px;
  min-height: 200px;
  padding: 0.65em;
  text-align: center;
  vertical-align: top;
  width: 65%;
}
article {
  background: #22313F;
  border-radius: 0.5em;
  min-height: 140px;
  padding: 0.25em;
}
aside {
  width: 30%;
}

<section id="container">
  <section id="principal">
    <article>
      <iframe width="640" height="360" src="https://www.youtube.com/embed/RUina9K2Y8g?controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
    </article>
  </section>

  <aside>
    <table class="mytable">
      <tr>
        <td></td>
        <td style="background-color:#6C7A89"><font color=#FFF><font size="4">My List of Stuff</font>
        </td>
      </tr>
      <tr>
        <td>
          <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-checkmark-outline-128.png" height="42" width="42">
        </td>
        <td>Filler One</td>
      </tr>
      <tbody>
        <tr>
          <td>
            <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-checkmark-outline-128.png" height="42" width="42">
          </td>
          <td>Filler Two</td>
        </tr>
        <tr>
          <td>
            <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-checkmark-outline-128.png" height="42" width="42">
          </td>
          <td>Filler Three</td>
        </tr>
        <tr>
          <td>
            <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-checkmark-outline-128.png" height="42" width="42">
          </td>
          <td>Filler Four</td>
        </tr>
        <tr>
          <td>
            <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-checkmark-outline-128.png" height="42" width="42">
          </td>
          <td>Filler Five</td>
        </tr>
        </tr>
      </tbody>
    </table>
  </aside>
</section>

Answer 1

1）我已经为JSFiddle准备了工作示例。该视频现已响应，但我不知道您希望视频和桌面的确定位置。 http://jsfiddle.net/8w2m9xdz/1/

2）我已经更新了您的代码。视频响应迅速。当您缩小窗口时，表格会在视频下方显示，因此它应该适用于移动设备，但您需要自己测试。

.mytable {
  margin-bottom: 20px;
  font-family: "Helvetica", "Arial";
  border: none;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
   width:100%;
}
.mytable td {
  color: #22313F;
  text-align: left;
  border-radius: 0.75em;
  font-weight: bold;
  padding: 0.4em 2em 0.7em 1.15em;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
  font-size: 0.9em;
}
.mytable tr {
  -webkit-transition: background 0.3s, box-shadow 0.3s;
  -moz-transition: background 0.3s, box-shadow 0.3s;
  transition: background 0.3s, box-shadow 0.3s;
}
#container {
  margin: 1em auto;
  max-width: 1500px;
  padding: 0;
  text-align: center;
  color: #22313F;
}
#principal,
aside {
  border-radius: 1em;
  display: inline-block;
  margin: 0.25em auto;
  max-width: 960px;
  min-height: 200px;
  padding: 0.65em;
  text-align: center;
  vertical-align: top;
  width: 65%;
}
article {
  background: #22313F;
  border-radius: 0.5em;
  min-height: 140px;
  padding: 0.25em;
}
aside {
  width: 30%;
}

/* Style that fixes your issue */
#principal article {    
    position: relative;
    padding-bottom: 56.25%;   
}
#principal article iframe {
    width: 100%;
    height: 100%;
    position:absolute;
    left: 0;
    top: 0;
}
}

<section id="container">
  <section id="principal">
    <article>
      <iframe src="https://www.youtube.com/embed/RUina9K2Y8g?controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
    </article>
  </section>

  <aside>
    <table class="mytable">
      <tr>
        <td></td>
        <td style="background-color:#6C7A89"><font color=#FFF><font size="4">My List of Stuff</font>
        </td>
      </tr>
      <tr>
        <td>
          <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-checkmark-outline-128.png" height="42" width="42">
        </td>
        <td>Filler One</td>
      </tr>
      <tbody>
        <tr>
          <td>
            <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-checkmark-outline-128.png" height="42" width="42">
          </td>
          <td>Filler Two</td>
        </tr>
        <tr>
          <td>
            <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-checkmark-outline-128.png" height="42" width="42">
          </td>
          <td>Filler Three</td>
        </tr>
        <tr>
          <td>
            <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-checkmark-outline-128.png" height="42" width="42">
          </td>
          <td>Filler Four</td>
        </tr>
        <tr>
          <td>
            <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-checkmark-outline-128.png" height="42" width="42">
          </td>
          <td>Filler Five</td>
        </tr>
        </tr>
      </tbody>
    </table>
  </aside>
</section>

如何使这个容器和表对移动和ipad大小做出响应？

1 个答案: