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

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

irbees2008 irbees2008 Опубликовано - 3 - ноября CSS
3121 - 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; }
}

Можешь почитать и вот эту статейку "Закрываем картинки от воровства."

Опрос

Ваше мнение

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

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

Теги

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

Статистика

  • Caйту: 4397 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 662
  • Онлайн всего: [4]
  • Гости: [3]
  • Поисковики: [1] Google
  • Были сегодня : [1] Google
  • SQL запросов: 33
  • Генерация страницы: 0.757сек
  • Потребление памяти: 5.161 Mb 
  •   Яндекс.Метрика