使用多个@media（max-width）CSS [英] Using multiple @media (max-width) CSS

问题描述

我正在尝试创建一个响应式网站，并且仅使用 @media屏幕和（最大宽度：...）& @media only screen and（min-width：...）尝试调整所有内容。

在一个 div 上使用多个 @media 时，它似乎没有工作。

小提琴此处将解释我正在努力。

HTML

 < div class =mainNavi2> 
< p>测试< / p> 
< / div> 
  

CSS

@media屏幕和（max-width：800px）{
.mainNavi2 {
border ：1px纯橙色;
}
}

@media仅屏幕和（最小宽度：851）{
.mainNavi2 {
border：1px纯绿色;



@media唯一屏幕和（最大宽度：850）{
.mainNavi2 {
border：1px solid blue;


$ / code>

我基本上试图做的是： p>

• 屏幕为800px（或更小）时，将显示橙色边框


• 的宽度为850px（或更少）时，将会显示蓝色边框


• 宽度为851（或更多）时，将显示绿色边框。

它们都是单独运作的，但是当所有人放在一起时，只有最大宽度：800px 工作。

解决方案

由于媒体查询的顺序，橙色正在被蓝色覆盖。重新排列它们，它的工作原理：

  @media屏幕和（最大宽度：850px）{
 .mainNavi2 { 
 border：1px纯蓝色; 
 
} 
 @media仅限屏幕和（最大宽度：800px）{
 .mainNavi2 {
 border：1px solid orange; 
 
} 
 @media仅屏幕和（最小宽度：851px）{
 .mainNavi2 {
 border：1px纯绿色; 
} 
} 
  

Demo

更好的方法可能是遵循Bootstrap的领先和首先使用升序 min-width 语句：

  .mainNavi2 {
 border：1px纯橙色; 
} 
 @media唯一屏幕和（min-width：801px）{
 .mainNavi2 {
 border：1px solid blue; 
 
} 
 @media仅屏幕和（最小宽度：851px）{
 .mainNavi2 {
 border：1px纯绿色; 
} 
} 
  

演示2

I am trying to make a responsive website, and am using @media only screen and (max-width:...) & @media only screen and (min-width:...) to try and size everything.

When using multiple @media on one div, it does not seem to work.

The fiddle here will explain what I am trying to do.

HTML

<div class="mainNavi2">
  <p> test </p> 
</div>

CSS

@media only screen and (max-width: 800px) {
  .mainNavi2{
    border:1px solid orange; 
  }
}

@media only screen and (min-width: 851) {
  .mainNavi2{
    border:1px solid green;
  }
}

@media only screen and (max-width: 850) {
  .mainNavi2{
    border:1px solid blue;
  }
}

What I am basically trying to do is:

• when the screen is at 800px (or less), an orange border will be displayed
• for width of 850px (or less) a blue border will be displayed
• for a width of 851 (or more) a green border will be displayed.

They all work separately, but when all put together, only the max-width:800px works.

解决方案

Because of the order of your media queries, the orange is being overridden by the blue. Rearrange them and it works:

@media only screen and (max-width: 850px) {
    .mainNavi2 {
        border:1px solid blue;
    }
}
@media only screen and (max-width: 800px) {
    .mainNavi2 {
        border:1px solid orange;
    }
}
@media only screen and (min-width: 851px) {
    .mainNavi2 {
        border:1px solid green;
    }
}

Demo

A better approach might be to follow Bootstrap's lead and go mobile-first, using only ascending min-width statements:

.mainNavi2 {
    border:1px solid orange;
}
@media only screen and (min-width: 801px) {
    .mainNavi2 {
        border:1px solid blue;
    }
}
@media only screen and (min-width: 851px) {
    .mainNavi2 {
        border:1px solid green;
    }
}

Demo 2

这篇关于使用多个@media（max-width）CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！