Div 和图像不缩放，响应能力

Question

div:preview-电影没有占用剩余的宽度。

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

在小屏幕上，徽标 div 怎么会变小，细节电影 div 怎么会变小。

谢谢

HTML 代码：

<!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: "05";
   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;
}

Answer 1

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

以下几点可能会有帮助：

1) 您在 .details-movie 和 .preview-movie 中都使用了 width: 100vh;。 vh 基于高度，而不是宽度。你想让里面的div(.preview-movie)变成width: 100%，然后只操作parent的宽度。您可能想要 width: 100vw 在父级上，但是给 .details-movie 和 .logo 一个基于百分比的宽度会更明智。这样两者都会响应地扩展。请记住确保两个 div 的总和为 100%！

2) 我不是 100% 确定您所说的 "the itunes div overscaling on big screens" 是什么意思，但我认为您是在谈论图像被拉伸。它已经具有最大宽度，因此它永远不会超出这些界限 (300px)。只需将 height: 30% 替换为 width: 100%。这将确保图片不会被隐藏，并使其保持其比例。

3) 对于你的第三点，我也不是很清楚你的意思。我相信您想减小徽标的大小并将 .details-movie div 'underneath' 放在较小的屏幕上。这可以通过媒体查询来完成：

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

我做了一个 fiddle，您可以在 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;
}

我更新了 fiddle 以反映这一点，可以在 https://jsfiddle.net/Lnr2tt37/2/ 找到更改。

希望这对您有所帮助:)

Div 和图像不缩放，响应能力

Divs and image not scaling, responsiveness

html

javascript

css

responsive-design

responsive