如何使这个容器和表响应移动和ipad大小？(How can I make this container and table responsive for mobile and ipad size?)
我想尝试将其变成桌面平板电脑和移动电话的响应式设计，我很难让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&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>
I want to try to make this into a responsive design for Desktop Tablet and Mobile Phone, Im having a tough time making the youtube video responsive - can any one please help? Thanks really appreciate it
I am thinking that i need to do some sort of media query for the CSS but im not really sure how to do that - would really appreciate it for someone could explain to me how that works as well
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&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>
最满意答案
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&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>
1) I've prepared working example for on JSFiddle. The video is responsive now, but I don't know how exactly you want video and table to be positioned. http://jsfiddle.net/8w2m9xdz/1/
2) I've update your code. Video is responsive. When you shrink the window, the table went underneath the video, so it should good on mobile devices, but you need to test it by yourself.
.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&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>
更多推荐
发布评论