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

Адаптивный дизайн для сайта через @media
HTML и CSS 0    533 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. Это простой инструмент, который помогает тестировать адаптивный дизайн.


Cмотрю на свой контент и думаю: стал бы я сам делиться им с друзьями?


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

Подборка слайдеров для сайта на чистом CSS
Кнопка для сайта в стиле минимализм
Градиент для кнопок на сайте
3D текст с мультяшным эффектом на CSS
CSS анимация в стиле рентгена
Верстка блоков со стрелочками
Анимированный фон с плавающими облаками
Красивое оформление 404 страницы
Вертикальное hover hide меню для сайта на HTML и CSS
Стилизация Input File

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

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

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