/* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) {...} /* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 600px) {...} /* Medium devices (landscape tablets, 768px and up) */ @media only screen and (min-width: 768px) {...} /* Large devices (laptops/desktops, 992px and up) */ @media only screen and (min-width: 992px) {...} /* Extra large devices (large laptops and desktops, 1200px and up) */ @media only screen and (min-width: 1200px) {...}

media query desktop

Syntax: @media( media feature ) { // CSS Property } The screen resolutions of different devices are listed below: Mobile (Smartphone) max-width: 480px Low Resolution Tablets and ipads max-width: 767px Tablets Ipads portrait mode max-width:1024px Desktops max-width:1280px Huge size (Larger screen) max-width: 1281px and greater

mobile tablet desktop media queries

@media (min-width: 600px) and (max-width: 800px) { /* your css code here */ /* html { background: red; } */ }

media query css for all devices

480px

max width of mobile screen