如何在css中正确使用@media

问题描述

如何在 css 中使用 @media 来达到特定的分辨率?所以我想根据用户分辨率来改变我的侧边栏，所以我使用@media.

How to use @media in css for certain resolution? So I want to make my sidebar changes depend on the user resolution, so I use @media.

这是示例代码:

    @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%;
  }
}

在那些代码中，我对使用分辨率进行了评论，它运行良好，直到我从 1366x768 及以下打开我的网页，它被 @media (max-width: 1400px) 和 (min-width: 1050px) 覆盖).我如何防止它出现这个问题?谢谢

in those code I put comment of the uses resolution, it works well until I opened my web from 1366x768 and bellow, it was overwrite with @media (max-width: 1400px) and (min-width: 1050px). How I prevent it from this problem? thanks

推荐答案

您犯了一个小错误，认为媒体查询中的第二个参数定义了某个高度.不是，它仍然定义了宽度.

You're making the tiny mistake to think the second parameter in the media query defines a certain height. It doesn't, it still defines the width.

@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%;
  }
}

你真正想要的是:

@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%;
  }
}

请记住，您正在使用这些规则更改范围"而不是特定视口.您不会基于 1920x1080 屏幕更改 CSS，但是您可以在屏幕有足够空间(即宽度为 1920 像素或更多)时更改它

Keep in mind that you're changing 'ranges' instead of specific viewports with these rules. You don't change the CSS based on a 1920x1080 screen, but you change it when a screen has enough space, namely 1920 pixels in width or more

这篇关于如何在css中正确使用@media的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！