在移动版youtube视频页面中,内容如下:
但在web浏览器桌面版本中,相关视频变成了侧边栏,同时指向视频和评论部分。
他们是怎么做到的?他们的源代码太复杂了,我搞不懂。是否可以使用css grid或flexbox
以某种方式完成
因此,起点是:
HTML
<div id="video">Video</div>
<div id="related">Related Videos</div>
<div id="comments">Comments</div>
CSS
#video {}
#related {}
#comments {}
@media (max-width:768px) {
#video {}
#related {}
#comments {}
}
大thx
编辑
我猜它是不安全的,但它做了我需要的:
CSS
@media (max-width:768px) {
#container * {display:block;}
}
HTML
<table id="container">
<tr>
<td>
<h3>Topic Title</h3>
<p>Non-fixed height content</p>
</td>
<td rowspan="2">
<h3>Related topics</h3>
<p>Topic title 1</p>
<p>Topic title 2</p>
<p>Topic title 3</p>
<p>Topic title 4</p>
<p>Topic title 5</p>
<p>Topic title 6</p>
</td>
</tr>
<tr>
<td>
<h3>Comments</h3>
<p>Comment 1</p>
<p>Comment 2</p>
<p>Comment 3</p>
</td>
</tr>
</table>
发布于 2018-06-01 08:15:45
可以使用flex
order
和float
完成此操作
<div class="content">
<div class="recommended">Recommended</div>
<div class="video">Video</div>
<div class="comments">Comments</div>
</div>
.content {}
.recommended {float:right;}
.video {}
.comments {}
@media (max-width:768px) {
.content {display:flex;flex-direction:column;}
.recommended {order:2;}
.video {order:1;}
.comments {order:3;}
}
发布于 2018-05-12 05:56:46
您可以使用媒体查询。
@media screen and (min-width: 768px) {
.video {
width: 65%;
float:left;
}
.sidebar, .related-video {
width: 35%;
float: left;
}
.comment {
width: 100%;
float: left;
}
}
/* Hide the related video in screens exceeding 768px */
@media screen and (max-width: 768px) {
.related-video {
display: none;
}
}
我定义了当屏幕是MINIMUM
/至少768px宽的时候,CSS应该如何反应。
https://stackoverflow.com/questions/50300550
复制相似问题