Comment utiliser @media correctement dans css

Question

Comment utiliser @media dans css pour certaines résolutions? Donc, je veux que mes changements de barre latérale dépendent de la résolution de l'utilisateur, donc j'utilise @media.

Voici le code exemple:

@media (max-width: 1920px) and (min-width: 1080px){ /*for 1920 x 1080*/ 
    .logo1{ 
    margin-top: 70%; 
    } 

    .socmed a:nth-child(1), .socmed a:nth-child(2){ 
    margin-top: 100%; 
    } 
} 

@media (max-width: 1680px) and (min-width: 1050px){ /*for 1680 x 1050*/ 
    .logo1{ 
    margin-top: 70%; 
    } 

    .socmed a:nth-child(1), .socmed a:nth-child(2){ 
    margin-top: 90%; 
    } 
} 

@media (max-width: 1600px) and (min-width: 900px){ /*for 1600 x 900*/ 
    .logo1{ 
    margin-top: 50%; 
    } 

    .socmed a:nth-child(1), .socmed a:nth-child(2){ 
    margin-top: 40%; 
    } 
} 

@media (max-width: 1440px) and (min-width: 900px){ /*for 1440 x 900*/ 
    .logo1{ 
    margin-top: 40%; 
    } 

    .socmed a:nth-child(1), .socmed a:nth-child(2){ 
    margin-top: 50%; 
    } 
} 

@media (max-width: 1400px) and (min-width: 1050px){ /*for 1400 x 1050*/ 
    .logo1{ 
    margin-top: 70%; 
    } 

    .socmed a:nth-child(1), .socmed a:nth-child(2){ 
    margin-top: 90%; 
    } 
} 

@media (max-width: 1366px) and (min-width:768px){ /*for 1366 x 768 until 1024 x 768*/ 
    .socmed a:nth-child(1), .socmed a:nth-child(2){ 
    margin-top: 20%; 
    } 
} 

dans les code que je mets un commentaire de la résolution des utilisations, il fonctionne bien jusqu'à ce que j'ouvert mon web de 1366x768 et ci-dessous, il était Ecraser @media (max-width: 1400px) and (min-width: 1050px). Comment je l'empêche de ce problème? merci

Answer 1

Vous faites la petite erreur de penser que le second paramètre de la requête multimédia définit une certaine hauteur. Il ne le fait pas, il définit toujours la largeur.

@media (max-width: 1920px) and (min-width: 1080px){ 
// You're assuming the screen's maximal width to be 1920, 
// and it's minimal width to be 1080px, which means this CSS 
// is applied when the screen's width is 1080px or more, 
// but less than 1920px; 

    .logo1 { 
    margin-top: 70%; 
    } 

    .socmed a:nth-child(1), .socmed a:nth-child(2) { 
    margin-top: 100%; 
    } 
} 

Qu'est-ce que vous voulez réellement est ceci:

@media (min-width: 1920px) { /*1920px or larger*/ 
    .logo1 { 
    margin-top: 70%; 
    } 

    .socmed a:nth-child(1), .socmed a:nth-child(2){ 
    margin-top: 100%; 
    } 
} 

@media (min-width: 1680px) { /*for 1680 x 1050*/ 
    .logo1{ 
    margin-top: 70%; 
    } 

    .socmed a:nth-child(1), .socmed a:nth-child(2){ 
    margin-top: 90%; 
    } 
} 

@media (min-width: 1600px) { /*for 1600 x 900*/ 
    .logo1{ 
    margin-top: 50%; 
    } 

    .socmed a:nth-child(1), .socmed a:nth-child(2){ 
    margin-top: 40%; 
    } 
} 

@media (min-width: 1440px) { /*for 1440 x 900*/ 
    .logo1 { 
    margin-top: 40%; 
    } 

    .socmed a:nth-child(1), .socmed a:nth-child(2){ 
    margin-top: 50%; 
    } 
} 

@media (min-width: 1400px) { /*for 1400 x 1050*/ 
    .logo1{ 
    margin-top: 70%; 
    } 

    .socmed a:nth-child(1), .socmed a:nth-child(2){ 
    margin-top: 90%; 
    } 
} 

@media (min-width: 1366px) { /*for 1366 x 768 until 1024 x 768*/ 
    .socmed a:nth-child(1), .socmed a:nth-child(2){ 
    margin-top: 20%; 
    } 
} 

Gardez à l'esprit que vous changez « plages » au lieu de viewports spécifiques avec ces règles. Vous ne modifiez pas le CSS basé sur un écran 1920x1080, mais vous le changez quand un écran a assez d'espace, à savoir 1920 pixels de largeur ou plus

Answer 2

Vous spécifiez uniquement la largeur et les requêtes se chevauchent. "1080" dans "1920x1080" signifie hauteur.