Адаптивный дизайн для сайта через @media

Адаптивный дизайн для сайта через @media
HTML и CSS 0    104 0

Когда нужно сделать адаптив для сайта, то обычно я использую следующие разрешения мониторов:

@media(min-width:0px) and (max-width:320px) {
	/* совсем маленькие экраны андроидов */
}

@media(min-width:321px) and (max-width:480px) {
	/* популярные разрешения смартфонов уже более позднего поколения андроид */
}

@media(min-width:481px) and (max-width:768px) {
	/* телефоны в перевернутом состоянии и некоторые планшеты */
}

@media(min-width:769px) and (max-width:992px) {
	/* планшеты */
}

@media(min-width:993px) and (max-width:1200px) {
	/* экраны некоторых ноутбуков и некоторых планшетов */
}

Также я использую расширение для хрома Mobile/Responsive Web Design Tester. Это простой инструмент, который помогает тестировать адаптивный дизайн.


Похожие статьи:

Вертикальное hover hide меню для сайта на HTML и CSS
Стилизация Input File
Стилизация checkbox и radio
Учим HTML5 Canvas за 30 минут
Красивые заголовки ▶ подборка
Прелоадер для сайта ▶ как сделать?
Красивые CSS3 кнопки с анимацией и hover эффектами
Как скрыть элементы в Bootstrap | Классы .hidden и .visible

Комментарии ()

    Вы должны авторизоваться, чтобы оставлять комментарии.

    Вы можете авторизоваться на сайте через:
    YandexVkontakte