Хаки и Скрипты Next Generation CMS

Размеры экранов для адаптивной верстки

irbees2008 irbees2008 Опубликовано - 3 - ноября CSS
3250 - 0
  • Источник:
  • Уровень сложности исполнения: Справочник

Размеры экранов для адаптивной верстки , в котором расписаны наиболее распространенные размеры дисплеев.

Код:
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

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

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

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

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Если нужно скрыть какие-то блоки на мобильных устройствах:
Код:
@media (max-width: 960px) {
.hideme { display: none; }
}

Можешь почитать и вот эту статейку "Разметка Ogmeta без плагина на Twige"

Опрос

Ваше мнение

Каким софтом вы пользуетесь?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4612 дней
  • Новостей: 568
  • Комменты: 257
  • Зарегистрированно : 673
  • Онлайн всего: [14]
  • Гости: [14]
  • Были сегодня : [3] Google, Яндекс, Яндекс
  • SQL запросов: 30
  • Генерация страницы: 0.318сек
  • Потребление памяти: 5.512 Mb 
  •   Яндекс.Метрика