Mess with the best, die like the rest… 

Facebook

HTML Responsive Webdesign CSS-template

This is a quick fast way to CSS your site to responsive webdesign.. enjoy..

/* ——————————————————— */
/* APPLE MACBOOK PRO RETINA ETC. ————————— */
/* ——————————————————— */

/* Retina Displays/Screens (2880×1800) ——————— */
@media
only screen and (min–moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx) {
}

/* ——————————————————— */
/* SMARTPHONES, TABLETS & TINY DESKTOPS ——————– */
/* ——————————————————— */

/* Old Smartphones (portrait and landscape) —————- */
@media
only screen and (min-device-width: 240px) and (max-device-width: 320px) {
/* YOUR STYLES */
}

/* Old Smartphones (e.g. portrait) ————————- */
@media
only screen and (max-width: 319px) {
/* YOUR STYLES */
}

/* Smartphones (portrait and landscape) ——————– */
@media
only screen and (min-device-width: 320px) and (max-device-width: 640px) {
/* YOUR STYLES */
}

/* Smartphones (portrait) & Old SP (landscape) ————- */
@media
only screen and (min-width: 320px) and (max-width: 479px) {
/* YOUR STYLES */
}

/* Smartphones (landscape) & Old Tablets (Portrait) ——– */
@media
only screen and (min-width: 480px) and (max-width: 639px) {
/* YOUR STYLES */
}

/* Smartphones & Tablets (portrait & landscape) ———— */
@media
only screen and (min-device-width: 640px) and (max-device-width: 960px) {
/* YOUR STYLES */
}

/* Smartphones & Tablets (portrait) & Tiny Desktops ——– */
@media
only screen and (min-width: 640px) and (max-width: 799px) {
/* YOUR STYLES */
}

/* Smartphones & Tablets (landscape) & Splitted Desktops — */
@media
only screen and (min-width: 800px) and (max-width: 1000px) {
/* YOUR STYLES */
}

/* ——————————————————— */
/* DEVICES BY RATIO —————————————- */
/* ——————————————————— */

/* LowRes (e.g. 240×320 / 320×480) ————————- */
@media
only screen and (min–moz-device-pixel-ratio: 0.75),
only screen and (-o-min-device-pixel-ratio: 3/4),
only screen and (-webkit-min-device-pixel-ratio: 0.75),
only screen and (min-device-pixel-ratio: 0.75),
only screen and (min-resolution: 0.75dppx) {
/* YOUR STYLES */
}

/* HighRes ————————————————- */
@media
only screen and (min–moz-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 1.5dppx) {
/* YOUR STYLES */

/* e.g. HighRes Logo (use _2x as extension for double-sized images) */
/* .logo {background-image: url(logo_2x.png); background-size: 50%;} */
}

/* RetinaRes Smartphones (e.g. iPhone 4 / portrait) ——– */
@media
only screen and (min–moz-device-pixel-ratio: 1.5) and (orientation: portrait),
only screen and (-o-min-device-pixel-ratio: 3/2) and (orientation: portrait),
only screen and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait),
only screen and (min-device-pixel-ratio: 1.5) and (orientation: portrait),
only screen and (min-resolution: 1.5dppx) and (orientation: portrait) {
/* YOUR STYLES */
}

/* RetinaRes Smartphones (e.g. iPhone 4 / landscape) ——- */
@media
only screen and (min–moz-device-pixel-ratio: 1.5) and (orientation: landscape),
only screen and (-o-min-device-pixel-ratio: 3/2) and (orientation: landscape),
only screen and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape),
only screen and (min-device-pixel-ratio: 1.5) and (orientation: landscape),
only screen and (min-resolution: 1.5dppx) and (orientation: landscape) {
/* YOUR STYLES */
}

/* ——————————————————— */
/* IPADS ————————————————— */
/* ——————————————————— */

/* iPads (portrait and landscape) ————————– */
@media
only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* YOUR STYLES */
}

/* iPads (portrait) —————————————- */
@media
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
/* YOUR STYLES */
}

/* iPads (landscape) ————————————— */
@media
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
/* YOUR STYLES */
}

/* iPad Retina (iPad 3; portrait and landscape) ———— */
@media
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (min–moz-device-pixel-ratio: 2),
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (min-device-pixel-ratio: 2),
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (min-resolution: 2dppx) {
/* YOUR STYLES */
}

/* ——————————————————— */
/* COMPUTERS / OTHER DEVICES ——————————- */
/* ——————————————————— */

/* Displays/Screens (e.g. MacBook @ 1280×800) ————– */
@media
only screen and (min-width: 1250px) and (max-width: 1409px) {
/* YOUR STYLES */
}

/* Displays/Screens (e.g. 19″ WS @ 1440×900) ————— */
@media
only screen and (min-width: 1410px) and (max-width: 1649px) {
/* YOUR STYLES */
}

/* Displays/Screens (e.g. 22″ WS @ 1680×1050) ————– */
@media
only screen and (min-width: 1650px) and (max-width: 1889px) {
/* YOUR STYLES */
}

/* Displays/Screens (e.g. 24″ WS @ 1920×1080) ————– */
@media
only screen and (min-width: 1890px) and (max-width: 2529px) {
/* YOUR STYLES */
}

/* Really Large Displays/Screens (e.g. 2560×1440) ———- */
@media
only screen and (min-width: 2530px) {
/* YOUR STYLES */
}

 

You must be logged in , to post a comment.

Home HTML HTML Responsive Webdesign CSS-template
credit