如何在css中正确使用@media

本文介绍了如何在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