CSS: Media Queries for responsive layouts (Smartphone, Tablet, Desktop)

CSS: Media Queries for responsive layouts (Smartphone, Tablet, Desktop)

When you need to adjust some elements of your web design layouts to be suitable with various browser screen sizes, Media Query is coming to help. Here are the general types of code for your project:

GENERAL SMARTPHONES (PORTRAIT AND LANDSCAPE)

 

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

 

IPAD (PORTRAIT AND LANDSCAPE)

 

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

 

IPAD MINI (PORTRAIT AND LANDSCAPE)

 

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

 

IPHONE 5 (PORTRAIT AND LANDSCAPE)

 

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

 

FOR THE WEB BROWSER BETWEEN 600PX AND 900PX

 

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

 

LARGE DESKTOPS

 

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

 

No Comments

Post a Comment

%d bloggers like this: