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;
}
最佳答案
感谢您提供解决问题实际需要的所有代码!
以下几点可能对您有所帮助:
1) 您在 .details-movie 和 .preview-movie 中都使用了 width: 100vh;。 vh 基于高度，而不是宽度。您希望内部 div (.preview-movie) 为 width: 100%，然后仅操作父级的宽度。您可能希望在父级上使用 width: 100vw，但同时提供 .details-movie 和 .logo 会更明智 基于百分比的宽度。这样两者都会响应地扩展。请记住确保两个 div 的总和为 100%!
2) 我不是 100% 确定“大屏幕上的 itunes div 过度缩放”是什么意思，但我认为您是在谈论图像被拉伸(stretch)。它已经有一个最大宽度，所以它永远不会超出这些界限 (300px)。只需将 height: 30% 替换为 width: 100%。这将确保图片不会被隐藏，并使其保持其比例。
3) 对于您的第三点，我也不太确定您的意思。我相信您想减小 Logo 的大小并将 .details-movie div 在较小的屏幕上放在“下面”。这可以通过媒体查询来完成:
@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/ 上看到这些更改.还有很多工作要做，但希望这些变化反射(reflect)了你在这个问题中提出的观点。剩下的就看你自己了 ;)
希望这对您有所帮助!
评论后编辑:
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 以反射(reflect)这一点，可以在 https://jsfiddle.net/Lnr2tt37/2/ 找到更改。 .
希望这一切对您有所帮助:)
关于javascript - Div 和图像不缩放，响应能力，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39541311/