使用媒体查询解决Netflix克隆的响应式Web设计

Question

嗨，这是我的第一个问题。我正在为一个项目制作Netflix的登录页克隆，当时我第一次被页面的响应能力卡住了。这是Netflix的动画卡片容器，949px，它变为弹性列，使文本保持成行，媒体变得更大。由于某种原因，我无法让它工作，甚至复制网站设置和单位。949px响应

549px 549px响应也是如此

这是我的html和css代码：

body {
background-color: black;
direction: ltr;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 16px;
}
@media only screen and (min-width: 1450px), 
only screen and (min-width: 550px) and (max-width: 949px), 
only screen and (min-width: 950px) and (max-width: 1449px)
{
.cards {
padding: 70px 45px;
}
}
.cards {
background: transparent;
border-bottom: 8px solid #222;
color: #fff;
margin-bottom: 0;
padding: 50px 5%;
position: relative;
}
@media only screen and (max-width: 349px), 
only screen and (min-width: 350px) and (max-width: 399px), 
only screen and (min-width: 400px) and (max-width: 549px), 
only screen and (min-width: 550px) and (max-width: 949px)
{
.animated-cards .animated-cards-container {
flex-direction: column;
}
}
.animated-cards .animated-cards-container {
align-items: center;
display: flex;
justify-content: space-between;
margin: 0 auto;
max-width: 1100px;
}
@media only screen and (max-width: 349px), only screen and (min-width: 350px) and (max-width: 399px), only screen and (min-width: 400px) and (max-width: 549px), only screen and (min-width: 550px) and (max-width: 949px)
{
.animated-cards.guarda-ovunque .animated-cards-text {
margin: 0;
}
}
.animated-cards.guarda-ovunque .animated-cards-text {
margin: -2% 0;
}
@media only screen and (max-width: 349px), only screen and (min-width: 350px) and (max-width: 399px), only screen and (min-width: 400px) and (max-width: 549px), only screen and (min-width: 550px) and (max-width: 949px)
{
.animated-cards .animated-cards-text {
padding: 0;
text-align: center;
width: 100%;
}
}
.animated-cards .animated-cards-text {
flex: 0 1 auto;
height: 100%;
padding: 0 3rem 0 0;
width: 52%;
z-index: 3;
}
@media only screen and (max-width: 349px), only screen and (min-width: 350px) and (max-width: 399px), only screen and (min-width: 400px) and (max-width: 549px)
{
.animated-cards-title {
font-size: 1.625rem;
}

}
.animated-cards-title {
font-size: 3.125rem;
line-height: 1.1;
margin-bottom: 0.5rem;
}
h2 {
font-size: 27px;
margin: 0 0 0.4em;
}
@media only screen and (max-width: 349px), only screen and (min-width: 350px) and (max-width: 399px), only screen and (min-width: 400px) and (max-width: 549px)
{
.animated-cards-sub, .animated-cards-text {
font-size: 1.125rem;
}
}
.animated-cards-sub, .animated-cards-text {
font-size: 1.625rem;
font-weight: 400;
}
h3 {
font-size: 20px;
}
@media only screen and (max-width: 349px), only screen and (min-width: 350px) and (max-width: 399px), only screen and (min-width: 400px) and (max-width: 549px), only screen and (min-width: 550px) and (max-width: 949px)
{
.animated-cards .animated-cards-media {
margin-top: 1em;
max-width: 600px;
width: 100%;
}
}
.animated-cards .animated-cards-media {
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
height: 100%;
width: 48%;
}
@media only screen and (max-width: 349px), only screen and (min-width: 350px) and (max-width: 399px), only screen and (min-width: 400px) and (max-width: 549px), only screen and (min-width: 550px) and (max-width: 949px)
{
.animated-cards.guarda-ovunque .media-container {
margin: -5% 0 0;
}
}
.animated-cards.guarda-ovunque .media-container {
margin: -5% -10% 0 0;
}
@media only screen and (max-width: 349px), only screen and (min-width: 350px) and (max-width: 399px), only screen and (min-width: 400px) and (max-width: 549px), only screen and (min-width: 550px) and (max-width: 949px)
{
.animated-cards .media-container {
margin: 0 auto;
}
}
.animated-cards .media-container {
overflow: hidden;
position: relative;
}
.animated-cards.guarda-ovunque .animated-cards-img {
position: relative;
z-index: 2;
}
img {
border: 0;
height: auto;
max-width: 100%;
}
.animated-cards.guarda-ovunque .animated-cards-video-container {
height: 100%;
left: 50%;
max-height: 47%;
max-width: 63%;
position: absolute;
top: 34%;
transform: translate(-50%,-50%);
width: 100%;
}
.animated-cards.guarda-ovunque .animated-cards-video  {
height: 100%;
width: 100%;
}
audio, canvas, progress, video {
display: inline-block;
vertical-align: baseline;
}
.animated-cards.flipped .animated-cards-container {
flex-flow: row-reverse;
}
@media only screen and (max-width: 349px), only screen and (min-width: 350px) and (max-width: 399px), only screen and (min-width: 400px) and (max-width: 549px), only screen and (min-width: 550px) and (max-width: 949px)
{
.animated-cards.flipped .animated-cards-container {
flex-flow: column;
}
}
@media only screen and (max-width: 349px), only screen and (min-width: 350px) and (max-width: 399px), only screen and (min-width: 400px) and (max-width: 549px), only screen and (min-width: 550px) and (max-width: 949px)
{
.animated-cards.flipped .animated-cards-container .animated-cards-text {
padding: 0;
}
}
.animated-cards.flipped .animated-cards-container .animated-cards-text {
padding: 0 0 0 3rem;
}

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testing</title>
</head>
<body>
<div class="cards animated-cards guarda-ovunque">
<div class="animated-cards-container">
<div class="animated-cards-text">
<h2 class="animated-cards-title">Guarda Netflix ovunque.</h2>
<h3 class="animated-cards-sub">Cellulare, tablet, laptop e TV: scegli tu cosa usare per guardare in streaming film e serie TV senza limiti e senza spendere di più.</h3>
</div>
<div class="animated-cards-media">
<div class="media-container">
<img src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/device-pile.png" alt="" class="animated-cards-img">
<div class="animated-cards-video-container">
<video class="animated-cards-video" autoplay="" playsinline="" muted="" loop=""><source src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/video-devices.m4v" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>
<div class="cards animated-cards bambini flipped">
<div class="animated-cards-container">
<div class="animated-cards-text">
<h2 class="animated-cards-title">Crea profili per i bambini.</h2>
<h3 class="animated-cards-sub">I bambini scoprono nuove avventure in compagnia dei loro personaggi preferiti in uno spazio tutto loro già incluso nel tuo abbonamento.</h3>
</div>
<div class="animated-cards-media">
<div class="media-container">
<img alt="" class="our-story-card-img" src="https://occ-0-728-2581.1.nflxso.net/dnm/api/v6/19OhWN2dO19C9txTON9tvTFtefw/AAAABUNsZVszA3HGW04LpkU1tiYnMIoqpcN6YbGSXu5OXQrvWLP1tn7Tee0YM-dJfCazJNwBKnR35ZoqbjE7gTezX57yHz57zixtKS1g.png?r=dda">
</div>
</div>
</div>
</div>
</body>
</html>

Answer 1

如果通过"不工作"；您的意思是，在较小的屏幕上该列太窄，只需将媒体查询中.animated-cards .animated-cards-text的width更改为100%(或任何其他所需值(：

(您可能还想更改媒体查询中的padding设置，以避免当前偏离中心轴(

body {
background-color: black;
direction: ltr;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 16px;
}
@media only screen and (min-width: 1450px), 
only screen and (min-width: 550px) and (max-width: 949px), 
only screen and (min-width: 950px) and (max-width: 1449px)
{
.cards {
padding: 70px 45px;
}
}
.cards {
background: transparent;
border-bottom: 8px solid #222;
color: #fff;
margin-bottom: 0;
padding: 50px 5%;
position: relative;
}
@media only screen and (max-width: 349px), 
only screen and (min-width: 350px) and (max-width: 399px), 
only screen and (min-width: 400px) and (max-width: 549px), 
only screen and (min-width: 550px) and (max-width: 949px)
{
.animated-cards .animated-cards-container {
flex-direction: column;
}
}
.animated-cards .animated-cards-container {
align-items: center;
display: flex;
justify-content: space-between;
margin: 0 auto;
max-width: 1100px;
}
@media only screen and (max-width: 349px), only screen and (min-width: 350px) and (max-width: 399px), only screen and (min-width: 400px) and (max-width: 549px), only screen and (min-width: 550px) and (max-width: 949px)
{
.animated-cards.guarda-ovunque .animated-cards-text {
margin: 0;
}
}
.animated-cards.guarda-ovunque .animated-cards-text {
margin: -2% 0;
}
@media only screen and (max-width: 349px), only screen and (min-width: 350px) and (max-width: 399px), only screen and (min-width: 400px) and (max-width: 549px), only screen and (min-width: 550px) and (max-width: 949px)
{
.animated-cards .animated-cards-text {
padding: 0;
text-align: center;
width: 100%;
}
}
.animated-cards .animated-cards-text {
flex: 0 1 auto;
height: 100%;
padding: 0 3rem 0 0;
width: 100%;
z-index: 3;
}
@media only screen and (max-width: 349px), only screen and (min-width: 350px) and (max-width: 399px), only screen and (min-width: 400px) and (max-width: 549px)
{
.animated-cards-title {
font-size: 1.625rem;
}

}
.animated-cards-title {
font-size: 3.125rem;
line-height: 1.1;
margin-bottom: 0.5rem;
}
h2 {
font-size: 27px;
margin: 0 0 0.4em;
}
@media only screen and (max-width: 349px), only screen and (min-width: 350px) and (max-width: 399px), only screen and (min-width: 400px) and (max-width: 549px)
{
.animated-cards-sub, .animated-cards-text {
font-size: 1.125rem;
}
}
.animated-cards-sub, .animated-cards-text {
font-size: 1.625rem;
font-weight: 400;
}
h3 {
font-size: 20px;
}
@media only screen and (max-width: 349px), only screen and (min-width: 350px) and (max-width: 399px), only screen and (min-width: 400px) and (max-width: 549px), only screen and (min-width: 550px) and (max-width: 949px)
{
.animated-cards .animated-cards-media {
margin-top: 1em;
max-width: 600px;
width: 100%;
}
}
.animated-cards .animated-cards-media {
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
height: 100%;
width: 48%;
}
@media only screen and (max-width: 349px), only screen and (min-width: 350px) and (max-width: 399px), only screen and (min-width: 400px) and (max-width: 549px), only screen and (min-width: 550px) and (max-width: 949px)
{
.animated-cards.guarda-ovunque .media-container {
margin: -5% 0 0;
}
}
.animated-cards.guarda-ovunque .media-container {
margin: -5% -10% 0 0;
}
@media only screen and (max-width: 349px), only screen and (min-width: 350px) and (max-width: 399px), only screen and (min-width: 400px) and (max-width: 549px), only screen and (min-width: 550px) and (max-width: 949px)
{
.animated-cards .media-container {
margin: 0 auto;
}
}
.animated-cards .media-container {
overflow: hidden;
position: relative;
}
.animated-cards.guarda-ovunque .animated-cards-img {
position: relative;
z-index: 2;
}
img {
border: 0;
height: auto;
max-width: 100%;
}
.animated-cards.guarda-ovunque .animated-cards-video-container {
height: 100%;
left: 50%;
max-height: 47%;
max-width: 63%;
position: absolute;
top: 34%;
transform: translate(-50%,-50%);
width: 100%;
}
.animated-cards.guarda-ovunque .animated-cards-video  {
height: 100%;
width: 100%;
}
audio, canvas, progress, video {
display: inline-block;
vertical-align: baseline;
}
.animated-cards.flipped .animated-cards-container {
flex-flow: row-reverse;
}
@media only screen and (max-width: 349px), only screen and (min-width: 350px) and (max-width: 399px), only screen and (min-width: 400px) and (max-width: 549px), only screen and (min-width: 550px) and (max-width: 949px)
{
.animated-cards.flipped .animated-cards-container {
flex-flow: column;
}
}
@media only screen and (max-width: 349px), only screen and (min-width: 350px) and (max-width: 399px), only screen and (min-width: 400px) and (max-width: 549px), only screen and (min-width: 550px) and (max-width: 949px)
{
.animated-cards.flipped .animated-cards-container .animated-cards-text {
padding: 0;
}
}
.animated-cards.flipped .animated-cards-container .animated-cards-text {
padding: 0 0 0 3rem;
}

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testing</title>
</head>
<body>
<div class="cards animated-cards guarda-ovunque">
<div class="animated-cards-container">
<div class="animated-cards-text">
<h2 class="animated-cards-title">Guarda Netflix ovunque.</h2>
<h3 class="animated-cards-sub">Cellulare, tablet, laptop e TV: scegli tu cosa usare per guardare in streaming film e serie TV senza limiti e senza spendere di più.</h3>
</div>
<div class="animated-cards-media">
<div class="media-container">
<img src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/device-pile.png" alt="" class="animated-cards-img">
<div class="animated-cards-video-container">
<video class="animated-cards-video" autoplay="" playsinline="" muted="" loop=""><source src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/video-devices.m4v" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>
<div class="cards animated-cards bambini flipped">
<div class="animated-cards-container">
<div class="animated-cards-text">
<h2 class="animated-cards-title">Crea profili per i bambini.</h2>
<h3 class="animated-cards-sub">I bambini scoprono nuove avventure in compagnia dei loro personaggi preferiti in uno spazio tutto loro già incluso nel tuo abbonamento.</h3>
</div>
<div class="animated-cards-media">
<div class="media-container">
<img alt="" class="our-story-card-img" src="https://occ-0-728-2581.1.nflxso.net/dnm/api/v6/19OhWN2dO19C9txTON9tvTFtefw/AAAABUNsZVszA3HGW04LpkU1tiYnMIoqpcN6YbGSXu5OXQrvWLP1tn7Tee0YM-dJfCazJNwBKnR35ZoqbjE7gTezX57yHz57zixtKS1g.png?r=dda">
</div>
</div>
</div>
</div>
</body>
</html>