Question

在移动版YouTube视频页面中，内容如下：

视频
相关视频
评论

但在网络浏览器桌面版中，相关视频会变为视频和评论部分的侧边栏。

他们是怎么做到的？他们的源代码很复杂，我无法弄清楚。可以用css网格或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 {}
}

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

Answer 1

可以使用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;}
}

https://jsfiddle.net/09jnamna/

Answer 2

您可以使用媒体查询。

工作JSFiddle example here

MINIMUM

我定义了当屏幕为ResultSetMetaData md = rs.getMetaData(); int colCount = md.getColumnCount(); for (int i = 1; i <= colCount ; i++){ String col_name = md.getColumnName(i); System.out.println(col_name); } /至少768px宽时CSS应该如何反应 - 这是;

在65％的屏幕上显示视频。
侧栏和相关视频占35％。
100％的评论，将在下一行＆＃34;＆＃34;，因为前100％已经填满。
在大于768像素宽的屏幕中隐藏相关视频。

你可以read up on media queries here

CSS：类似Youtube的视频页面布局

2 个答案: