This css code will hide sidebar if your browser width is lower than 480px or if your device width is lower than 480px:
@media screen and (max-width: 480px), screen and (max-device-width: 480px) { .sidebar {display:none;} }
Or import css styles with same conditions:
@import url("narrow.css") screen and (max-width: 480px), screen and (max-device-width: 480px);Or add css file into document with same conditions:
<link href="narrow.css" media="screen and (max-width: 480px), screen and (max-device-width: 480px)" rel="stylesheet" />Or add css file into document with width range:
<link href="medium.css" media="screen and (min-width: 701px) and (max-width: 900px)" rel="stylesheet" />height, width, min-width, max-width, min-height, max-height - is the width or height of the target display area, e.g. the browser.
device-width, device-height, min-device-width, max-device-width, min-device-height, max-device-height - is the width or height of the device's entire rendering area, i.e. the actual device screen.
Combinations with width:
@media screen (min-device-width: 320px) and (max-device-width: 480px), screen (min-width: 320px) and (max-width: 480px) { ... }Other parameters:
@media screen and (orientation:portrait) { ... } @media screen and (orientation:landscape) { ... } @media screen and (device-aspect-ratio: 16/9) { ... } @media screen and (color) { /* Screen is in color */ } @media screen and (min-color-index: 256) { /* Screen has at least 256 colors */ } @media screen and (monochrome) { /* Screen is monochrome */ } @media screen and (resolution: 163dpi) { ... }
Media Types:
| Media Type | Description |
|---|---|
| all | Used for all media type devices |
| aural | Used for speech and sound synthesizers |
| braille | Used for braille tactile feedback devices |
| embossed | Used for paged braille printers |
| handheld | Used for small or handheld devices |
| Used for printers | |
| projection | Used for projected presentations, like slides |
| screen | Used for computer screens |
| tty | Used for media using a fixed-pitch character grid, like teletypes and terminals |
| tv | Used for television-type devices |
This code is using css3 media queries. This is good for creating mobile version of your site for comfortable viewing it on iPhone or Android. Also this is good for creating different styles depending on the screen width.