如何在css中使用媒体查询 [英] How to use media queries in css

问题描述

我非常希望在我的CSS中使用媒体查询，但我很困惑如何使用它。我已经支持

我的查询要求是

如果屏幕宽度是100到480， / p>

如果屏幕宽度为481到600，那么不同的样式就会出现，

如果屏幕宽度为601到800， ，

如果屏幕宽度801，则默认CSS应该工作。

解决方案

  .class {/ * default style * /} 
 
 @media（min-width：100px）and（max-width：480px）{
 .class {/ * style * /} 
} 
 
 @media（min-width：481px）and（max-width：600px）{
 .class {/ * style * /} 
} 
 
 @media（min-width：601px）and（max-width：800px）{
 .class {/ * style * /} 
} 
  

I am very keen to use media queries in my CSS but i am confused to how to use it. I have stand

my queries requirement is

if screen width is 100 to 480 then different style comes,

if screen width 481 to 600 then different style comes,

if screen width 601 to 800 then different style comes,

if screen width 801 then default CSS should work.

解决方案

.class { /* default style */ }

@media (min-width: 100px) and (max-width: 480px) {
 .class { /* style */ }
}

@media (min-width: 481px) and (max-width: 600px) {
 .class { /* style */ }
}

@media (min-width: 601px) and (max-width: 800px) {
 .class { /* style */ }
}

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