Question

当屏幕尺寸变小时，我的聊天框在视频下方出现问题。另外，如何让视频在小屏幕上变小？我希望它能够做出回应。

{(0, 2), (1, 2), (1, 3), (1, 7), (3, 5), (4, 1), (6, 6), (7, 7), (9, 6)}

enter image description here 这就是我想要实现的目标。

enter image description here 但这是我要来的。

Answer 1

您可以使用flex-wrap CSS属性来完成工作。将flex-wrap属性应用于包含Video和Chat元素的父元素。

尝试查看此页https://css-tricks.com/almanac/properties/f/flex-wrap/上的演示，了解其工作原理。调整浏览器屏幕的大小，以便相应地看到黄色瓷砖包装。

Answer 2

您可以使用flexbox来解决此问题。使用flex-wrap: wrap在较小的屏幕上点击底部的聊天，flex-shrink: 0不要让视频缩小其尺寸。

运行此代码段以了解。

.parent {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background-color: yellow;
}

.video {
  flex-shrink: 0;
  background-color: red;
  width: 200px;
}

.chat {
  width: 100px;
  background-color: orange;
  flex-shrink: 0;
}

<div class="parent">
  <div class="video">
    VIDEO
  </div>
  <div class="chat">
    CHAT
  </div>
</div>

如果有帮助，请告诉我。

Answer 3

假设您使用Bootstrap 4进行布局，我将回答您的问题。使用BS的响应式布局非常简单。以下是您可以尝试的代码：

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</head>

<body>
    <div class="container-fluid">
        <h1>Sample testing</h1>
        <div class="row">
            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
                </div>
            </div>
            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="container">
                    <p>Your chat component will come here.</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

＆＃13;

让div在小屏幕下面

3 个答案: