Answers for "how to apply media query in css"

CSS
120

css media queries

@media only screen and (max-width: 1200px){
    /*Tablets [601px -> 1200px]*/
}
@media only screen and (max-width: 600px){
	/*Big smartphones [426px -> 600px]*/
}
@media only screen and (max-width: 425px){
	/*Small smartphones [325px -> 425px]*/
}
Posted by: Guest on July-04-2020
51

media query

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
Posted by: Guest on December-06-2019
1

minimum width of different devices in html

body {
  background: white;    
}

@media screen and (min-width: 980px) /* Desktop */ {
  body {
    background: red;
  }
}

@media screen  and (max-width: 979px) /* Tablet */ {
  body {
    background: blue;
  }
}

@media screen and (max-width: 500px) /* Mobile */ {
  body {
    background: green;
  }
}
Posted by: Guest on April-30-2020
0

media query in css

/*Any Mobile Device*/
@media only screen and (max-width: 767px) { }
 /*Tablets Device*/
@media only screen and (max-width: 991px) { }
 /*ipad Pro  Device*/
@media only screen and (max-width: 1024px) { }
 /*large  Device*/
@media only screen and (max-width: 1200px) { }
Posted by: Guest on October-19-2021
-1

iphne media query csss

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { /* STYLES GO HERE */}
Posted by: Guest on September-26-2020
0

@media query css

@media screen and (min-width: 320px) and (max-width: 786px) {
	// custom CSS
}
Posted by: Guest on October-19-2021

Browse Popular Code Answers by Language