hotsnow | CSS: Media Queries for responsive layouts (Smartphone, Tablet, Desktop) | hotsnow
Hotsnow design agency. We are creative graphic design studio, branding agency and web design in Finland. Contact us to ask the offer now!
hotsnow, design studio, web design studio, design agency, graphic design, web design, product design, 3d design, 3d visualisation, branding, logo, nettisivut, 3d visualisointi, graafinen suunnittelu, graafisen suunnittelun toimisto, landing pages, ilme, дизайн-студия, дизайн, веб дизайн, логотипы, 3д,
22117
post-template-default,single,single-post,postid-22117,single-format-standard,ajax_fade,page_not_loaded,,select-theme-ver-4.1,vertical_menu_enabled,wpb-js-composer js-comp-ver-5.2.1,vc_responsive

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