✑ CSS Media Queries

Сегодня все чаще и чаще при создании сайтов используется адаптивная верстка. Это очень удобно и правильно, потому что не нужно делать несколько версий разметки для разных устройств - достаточно подсунуть необходимую CSS для сматрфона или планшета и все!

Как это сделать?

1. Хардкодный метод:

<link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 480px)" href="css/iphone.css" />
<link rel="stylesheet" media="screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="css/ipad.css" />

2. CSS Media Queries:

/* Smartphones (portrait and landscape) */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles or @import */
}
/* Smartphones (landscape) */
@media only screen
and (min-width : 321px) {
/* Styles or @import */
}
/* Smartphones (portrait) */
@media only screen
and (max-width : 320px) {
/* Styles or @import */
}
/* iPads (portrait and landscape) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles or @import */
}
/* iPads (landscape) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles or @import */
}
/* iPads (portrait) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles or @import */
}
/* Desktops and laptops */
@media only screen
and (min-width : 1224px) {
/* Styles or @import */
}
/* HD screens */
@media only screen
and (min-width : 1824px) {
/* Styles or @import */
}
/* Retina displays */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles or @import */
}

3. @import в зависимости от минимальной ширины браузера:

<style>
@import url(small.css) (min-width : 400px);
@import url(medium.css) (min-width : 600px);
@import url(normal.css) (min-width : 800px);
</style>