Question

div：preview-movie没有占据宽度的其余部分。

itunes div在大屏幕上过度缩放。

在小屏幕上，徽标div如何变得更小，细节电影div如何。

由于

HTML CODE：

<!DOCTYPE html>
<html>
<head>
    <title>Page-movie-x</title>
    <link rel="stylesheet" href="page-film.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <META HTTP-EQUIV="refresh" CONTENT="15">
</head>
<body>
    <div class="dropdown-menu">
        <p>
            menu dropdown
        </p>
    </div>
    <div class="container">

        <div class="logo">
            <div class="movie-name">
                A Name 
            </div>
            <img class="Itunes-link" src="http://dxm2idf2u6bml.cloudfront.net/rest/serve/THUMBNAILS/55b856e3-c26f-416f-ac65-c588230582ee.jpg" >

            <div class="date-out">
                Date de sortie : / / 
            </div>

            <div class="rating">
                <span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
            </div>
        </div>
        <div class="details-movie">
            <div class="description-movie">

            </div>
            <div class="preview-movie">
                <iframe  class="youtube-vid" src="https://www.youtube.com/embed/eEZ0u9xI2yo"  ></iframe>

            </div>
        </div>
    </div>

</body>
</html>

CSS代码：

.container{
  display:flex;

}
.dropdown-menu{
    width: 100%;
    height: 5vh;
    background-color: blue;
}

.logo{
    max-width: 300px;
    height: 100vh;

    background-color: red;
}

.details-movie{
    height: 100vh;
    width: 100vh;
    background-color: grey;


}
.movie-name{background-color: yellow;}
.Itunes-link{
    height: 30%;
    max-width: 300px;
    max-height: 300px;
    background-color: green;
}

body{
    width: 100%;
    height: 100%;
}
.rating > span:hover:before {
   content: "\2605";
   position: absolute;
}

.description-movie{height:32%;
    background-color: white;
}
.preview-movie{
    display: flex;
    width: 100vh;
}
.preview-movie .youtube-vid{
justify-content: center;
    width: 100%;
    height: 100%;
    height: auto;
}

1 个答案:

答案 0 :(得分：1)

Answer 1

感谢您提供解决问题所需的所有代码！

以下是一些可能会有所帮助的事情：

1）您已在width: 100vh;和.details-movie中使用.preview-movie。 vh基于高度，而不是宽度。您希望内部div（.preview-movie）为width: 100%，然后仅操纵父级的宽度。您可能想要父母width: 100vw，但为.details-movie和.logo提供基于百分比的宽度更为明智。这样两者都会相应地扩展。请记住确保两个div总共增加100％！

2）我并不是100％肯定你的意思＆＃34; itunes div在大屏幕上过度缩放＆＃34;但我认为你在谈论图像被拉伸。它已经具有最大宽度，因此它永远不会逃脱那些边界（300px）。只需将height: 30%替换为width: 100%即可。这将确保图片不被隐藏，并且还将保持其比例。

3）对于你的第三点，我也不太清楚你的意思。我相信您希望减小徽标的大小，并将.details-movie div＆＃39;放在＆＃39;下面。在较小的屏幕上。这可以通过媒体查询来完成：

@media (max-width: 900px) { // Whatever size you'd like to affect
   .logo {
        width: 66px; // Whatever size changes you'd like 
    }
    .container {
        display: block;
    }
}

我已经做了一个小提琴，您可以在https://jsfiddle.net/Lnr2tt37/看到这些变化。还有很多工作要做，但希望这些变化反映了你在这个问题中提出的观点。剩下的由你来决定;）

希望这有帮助！

评论后编辑：

1）要解决nav不占用移动设备全宽的问题，您只需添加：

@media (max-width: 600px) {
    body > div > nav {
        flex: 100%;
    }
}

600像素看起来对我来说很合适，但您可能需要调整该断点。

2）为确保nav和main占据整个垂直高度，您可以使用以下内容：

@media (min-width: 601px) { // One pixel more than the max-width breakpoint
    body > div > nav {
        min-height: 100vh;
    }

请注意，您只希望在nav和main彼此相邻时发生这种情况，否则nav会变得庞大！

3）要确保YouTube视频（iframe）占据全宽，您只需要给它100％的宽度。并不是说你可能想要给它一个高度，以便更好地展示。不幸的是，iframe的工作方式使得它们的响应非常困难，所以你总是总是在某些宽度上得到一点黑条。这个高度对我来说似乎很有效，但你可能想调整它：

iframe {
   width: 100%;
   height: 344px;
}

我已经更新了小提琴以反映这一点，并且可以在https://jsfiddle.net/Lnr2tt37/2/找到更改。

希望这一切都有帮助：）

Div和图像没有缩放，响应性

1 个答案: