1. Media Query Range wise

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}
@media only screen and (min-device-width : 360px) and (max-device-width : 640px) {}
@media only screen and (min-device-width : 480px) and (max-device-width : 600px) {}
@media only screen and (min-device-width : 601px) and (max-device-width : 767px) {}
@media only screen and (min-device-width : 768px) and (max-device-width : 782px) {}
@media only screen and (min-device-width : 783px) and (max-device-width : 1024px) {}
@media only screen and (min-width : 1224px) {}
@media only screen and (min-width : 1824px) {}

 

2. Media Query

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}
@media only screen and (min-device-width : 360px) and (max-device-width : 640px) {}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {}
@media only screen and (min-device-width : 800px) and (max-device-width : 1280px) {}
@media only screen and (min-device-width : 980px) and (max-device-width : 1280px) {}
@media only screen and (min-device-width : 600px) and (max-device-width : 1280px) {}
@media only screen and (min-device-width : 900px) and (max-device-width : 1920px) {}

 

3. Media query for Safari or Chrome.

@media screen and (-webkit-min-device-pixel-ratio:0) {
}

 

4. For ie.11 only

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){}

 

Leave a Reply