Standard Media Query to make website responsive [duplicate] - css

Question

This question already has answers here:
Media Queries: How to target desktop, tablet, and mobile?
(21 answers)
Closed 1 year ago.
Is there any Standard Media query to apply for my website or any css code so that my design can be responsive in all devices like desktops,mobile devices etc.

Answer 1

/*==============================================================================
iPhone 4 and 4S || 320 x 480 || Default, Portrait and Landscape
================================================================================ */
#media only screen and (min-width: 320px)
and (max-width: 480px){
}
#media only screen and (min-width: 320px)
and (max-width: 480px) and (orientation: portrait) {
}
#media only screen and (min-width: 320px)
and (max-width: 480px) and (orientation: landscape) {
}
/*==============================================================================
iPhone 5, 5S, 5C and 5SE || 320 x 568 || Default, Portrait and Landscape
================================================================================ */
#media only screen and (min-width: 320px)
and (max-width: 568px){
}
#media only screen and (min-width: 320px)
and (max-width: 568px) and (orientation: portrait) {
}
#media only screen and (min-width: 320px)
and (max-width: 568px) and (orientation: landscape) {
}
/*==============================================================================
iPhone 6, 6S, 7 and 8 || 375 x 667 || Default, Portrait and Landscape
================================================================================ */
#media only screen and (min-width: 375px)
and (max-width: 667px){
}
#media only screen and (min-width: 375px)
and (max-width: 667px) and (orientation: portrait) {
}
#media only screen and (min-width: 375px)
and (max-width: 667px) and (orientation: landscape) {
}
/*==============================================================================
iPhone 6+, 7+ and 8+ || 414 x 736 || Default, Portrait and Landscape
================================================================================ */
#media only screen and (min-width: 414px)
and (max-width: 736px){
}
#media only screen and (min-width: 414px)
and (max-width: 736px) and (orientation: portrait) {
}
#media only screen and (min-width: 414px)
and (max-width: 736px) and (orientation: landscape) {
}
/*==============================================================================
iPhone X || 375 x 812 || Default, Portrait and Landscape
================================================================================ */
#media only screen and (min-width: 375px)
and (max-width: 812px){
}
#media only screen and (min-width: 375px)
and (max-width: 812px) and (orientation: portrait) {
}
#media only screen and (min-width: 375px)
and (max-width: 812px) and (orientation: landscape) {
}
/*==============================================================================
Galaxy S3 || 320 x 640 || Default, Portrait and Landscape
================================================================================ */
#media screen and (width: 320px)
and (height: 640px){
}
#media screen and (width: 320px)
and (height: 640px) and (orientation: portrait) {
}
#media screen and (width: 320px)
and (height: 640px) and (orientation: landscape) {
}
/*==============================================================================
Windows Phone 480 x 800 Default, Portrait and Landscape
================================================================================ */
#media screen and (width: 480px)
and (height: 800px) {
}
#media screen and (width: 480px)
and (height: 800px) and (orientation: portrait) {
}
#media screen and (width: 480px)
and (height: 800px) and (orientation: landscape) {
}
/*==============================================================================
iPad 1, 2, Mini and Air || 768 x 1024 || Default, Portrait and Landscape
================================================================================ */
#media only screen and (min-width: 768px)
and (max-width: 1024px) {
}
#media only screen and (min-width: 768px)
and (max-width: 1024px) and (orientation: portrait) {
}
#media only screen and (min-width: 768px)
and (max-width: 1024px) and (orientation: landscape) {
}
/*==============================================================================
iPad Pro 10.5 || 834 x 1112 || Default, Portrait and Landscape
================================================================================ */
#media only screen and (min-width: 834px)
and (max-width: 1112px){
}
#media only screen and (min-width: 834px)
and (max-width: 834px) and (orientation: portrait) {
}
#media only screen and (min-width: 1112px)
and (max-width: 1112px) and (orientation: landscape) {
}
/*==============================================================================
iPad Pro 12.9 || 1024 x 1366 || Default, Portrait and Landscape
================================================================================ */
#media only screen and (min-width: 1024px)
and (max-width: 1366px){
}
#media only screen and (min-width: 1024px)
and (max-width: 1024px) and (orientation: portrait) {
}
#media only screen and (min-width: 1366px)
and (max-width: 1366px) and (orientation: landscape) {
}
/*==============================================================================
Galaxy Tab 2 || 800 x 1280 || Default, Portrait and Landscape
================================================================================ */
#media (min-width: 800px) and (max-width: 1280px) {
}
#media (max-width: 800px) and (orientation: portrait) {
}
#media (max-width: 1280px) and (orientation: landscape) {
}
/*==============================================================================
Nexus 7 || 601 x 906 || Default, Portrait and Landscape
================================================================================ */
#media screen and (width: 601px)
and (height: 906px){
}
#media screen and (width: 601px)
and (height: 906px) and (orientation: portrait) {
}
#media screen and (width: 601px)
and (height: 906px) and (orientation: landscape) {
}
/*==============================================================================
Nexus 9 || 1536 x 2048 || Default, Portrait and Landscape
================================================================================ */
#media screen and (width: 1536px) and (height: 2048px) {
}
#media screen and (width: 1536px)
and (height: 2048px) and (orientation: portrait) {
}
#media screen and (width: 1536px)
and (height: 2048px) and (orientation: landscape) {
}
/*==============================================================================
Kindle Fire HD 8.9 || 1200 x 1600 || Default, Portrait and Landscape
================================================================================ */
#media only screen and (min-width: 1200px)
and (max-width: 1600px){
}
#media only screen and (min-width: 1200px)
and (max-width: 1600px) and (orientation: portrait) {
}
#media only screen and (min-width: 1200px)
and (max-width: 1600px) and (orientation: landscape) {
}

Answer 2

Use this to make Responsive website
#media only screen and (max-width: 1200px) {
<!-- For Desktop -->
}
#media only screen and (max-width: 992px) {
<!-- For Laptop -->
}
#media only screen and (max-width: 767px) {
<!-- For Tab -->
}
#media only screen and (max-width: 480px) {
<!-- For Mobile -->
}