Divs 和图像不缩放，响应性答案

【问题标题】：Divs and image not scaling, responsivenessDivs 和图像不缩放，响应性
【发布时间】：2016-09-18 08:35:51
【问题描述】：

div:preview-movie 没有占用其余的宽度。

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

在小屏幕上，如何让 logo div 变小，而 details-movie 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: "\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;
}

【问题讨论】：

标签： javascript html css responsive-design responsive

【解决方案1】：

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

以下几点可能会有所帮助：

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

2) 我不是 100% 确定您所说的“iTunes div 在大屏幕上过度缩放”是什么意思，但我认为您说的是图像被拉伸了。它已经有一个最大宽度，所以它永远不会逃脱那些界限（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;
    }
}

我做了一个小提琴，您可以在 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/ 找到更改。

希望这一切都有帮助:)

【讨论】：

您好，伙计，感谢您的回复，我更改了虽然这里是我完成的新代码，但一切都是响应式的，除了在小屏幕上导航不占用全宽，大屏幕上的元素不占用页面的完整长度。最后一个问题，您对添加 youtube 视频有什么想法吗？ jsfiddle.net/Lnr2tt37/1 谢谢
您所做的更改是一个巨大的改进！做得好！我已经更新了我的答案，希望能解决你在那里指出的三个问题。只需检查我答案的后半部分:)
@media 用于媒体查询。他们在特定的屏幕分辨率下应用 CSS 规则。您只需指定要影响的宽度，如上所述。在您的示例中，您想为小屏幕和大屏幕做不同的事情，因此您需要一个媒体查询。您想要的越精确，您需要的媒体查询就越多。有几个框架是围绕媒体查询构建的，例如 Bootstrap 和 Foundation，它们可以为您处理所有繁重的工作。可能值得研究这些:)
当我这样做时，我将尝试创建我自己的个人风格的框架，因为所有网站都开始看起来相似：d 再次感谢伙伴的大力帮助
别担心！尽管我确实建议您研究类似 Bootstrap 的东西。并非所有使用它的网站都相似；它只是让您更好地控制响应能力。例如，当在平板电脑或手机上查看时，它可以自动将元素移到另一个下方。需要担心媒体查询！有很多可定制性，最重要的是，它既免费又易于使用。一些示例可以在v4-alpha.getbootstrap.com/examples 找到。如果您选择制作自己的框架，那很好，但您实际上是在重新发明轮子；）