CSS Media Queries for Mobile & Desktop (iPhone & Tablet & Desktop & Laptop)

Media Query is a powerful tool that helps developing for various web browser screen size. Today, There is varied types of media devices that has a different screen resolution such as laptops, cellphone, and tablet. That’s why you need this code to make a perfect fit for various screen resolutions.
 

Desktop & Laptops

@media only screen and (min-width : 1224px) {
#content {background:#ffffff;}
}

 

Large Screen Resolution (For Bigger Monitor)

@media screen and (min-width : 1824px) {
#content {background:#ffffff;}
}

 

Custom – For the web browser between 600px and 900px

@media screen and (min-width: 600px) and (max-width: 900px) {
#content {background:#ffffff;}
}

 

iPhone 5 in portrait & landscape

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
#content {background:#ffffff;}
}

 

iPad mini in portrait & landscape

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
#content {background:#ffffff;}
}

 

iPad in portrait & landscape

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
#content {background:#ffffff;}
}

 

General Smartphones (portrait and landscape)

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
#content {background:#ffffff;}
}