如何使此容器和 table 响应移动设备和 ipad 大小？

Question

我想尝试将其变成桌面平板电脑和移动设备的响应式设计 Phone，我很难让 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 准备了工作示例。视频现在可以响应了，但我不知道您希望视频和 table 的具体定位方式。 http://jsfiddle.net/8w2m9xdz/1/

2) 我已经更新了你的代码。视频是响应式的。当你缩小window的时候，table就到视频下面了，所以在移动设备上应该不错，但你需要自己测试。

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

如何使此容器和 table 响应移动设备和 ipad 大小？

How can I make this container and table responsive for mobile and ipad size?

html

css

mobile

media-queries

responsive-design