Media screen

Media query

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Media query min and max

/* Max-width */
@media only screen and (max-width: 600px)  {...}

/* Min-width */
@media only screen and (min-width: 600px)  {...}

/* Combining media query expressions */
@media only screen and (max-width: 600px) and (min-width: 400px)  {...}

Css media query

/* BOOSTRAP MEDIA BREAKPOINTS */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {  
  .selector {
  	background-color:#f00;
  }
}
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

Source: bootstrapcreative.com

Media query min max

@media screen and (min-width: 200px) and (max-width: 640px) {
  .bloc {
    display:block;
    clear:both;
  }
}

Source: alsacreations.com

Media screen

@media (max-width: 991px){
    .mobile{
        display: block;
    }
}

Media query

@media (max-height : 800px){ /* from 0 to 800 px max height applies */
  p{
    font-size:10px
  }
}

-3

Similar codes

0 vote279 views1 answer
Z-index: 1000000;
CSS
0 vote321 views1 answer
ProgressBars bulma -- thickness
CSS Bulma
76 votes263 views6 answers
Reduce method
CSS
13 votes273 views4 answers
Scss transition mixin
CSS
39 votes283 views4 answers
Background image height and width
CSS
10 votes279 views4 answers
Bootstrap badges Links
CSS
0 vote273 views1 answer
How to use css in material ui
CSS
1 vote262 views1 answer
Css how to dynamically put div in front of another
CSS
4 votes269 views1 answer
Striped tables css
CSS
0 vote305 views1 answer
Faire d'une image un lien vers le haut de page css
CSS