Ширина сайта в зависимости от разрешения монитора


Ширина сайта в зависимости от разрешения монитора

В 2006 году большинство пользователей имело экран монитора 800*600. Но время неумолимо и в какой-то момент «нормальным» стал 1024*768. У веб-ресурсов, ориентированных на меньшее разрешение, появилось пустое пространство по бокам. Всё большую популярность стали приобретать «резиновые» сайты, которые создаются путём использования

Ширина сайта в зависимости от разрешения монитора

  1. @Media,
  2. относительных величин.

Благодаря им теперь не нужно искать оптимальную ширину сайта.

Ширина сайта в зависимости от разрешения монитора

@Media CSS

Для того, чтобы адаптировать дизайн web-проекта под разные устройства (мобильные телефоны, планшетники, принтеры и т.п.) применяется @Media. Из всего многообразия types и Queries, как правило, внедряют print и width. Рассмотрим последний. Он влияет на отображение сайта в окне браузера разной ширины. Поэтому для того, чтобы увидеть его в действии, достаточно уменьшить размеры окна браузера Ширина сайта в зависимости от разрешения монитора.

Попробуйте это сделать прямо сейчас. И вы увидите как боковая панель данного блога распадается (поиск перемещается вниз, содержание переходит в тело статьи), в меню сокращаются списки, убирается надпись «Дата обновления» и т.д.

Газовые пружины купить

Добавим правила перед тегом

</style>
<pre>@media (max-width: 930px) { /* это будет показано при разрешении монитора до 930 пикселей */
  .content-wrapper {padding: 0;} /* основное содержимое занимает всё пространство окна */
}

@media (max-width: 930px) and (min-width: 470px) {  /* для разрешения экрана от 470 до 930 пикселей */
  aside {position: static; width: 100%; background: #ccc;} /* боковая колонка смещается согласно расположению в HTML и меняет фон */
}

@media (max-width: 469px) { /* если максимальное разрешение экрана составит 469 пикселей */
  body {font: .9em/1em "Helvetica Neue",Arial,Helvetica,sans-serif;} /* меняется шрифт */
  aside {display: none;} /* боковая колонка исчезает */
}</pre>

Вместо px лучше использовать em. Для чего значение px нужно разделить на значение font-size в px. Например, 1600/16=100, а именно media='(min-width: 100em)’.

CSS стили можно как непосредственно добавить в код страницы, так и воспользоваться внешним файлом, например:

<pre><link rel='stylesheet' href='URL_по_умолчанию.css' />
<link rel='stylesheet' media='(min-width: 1600px)' href='URL_большой.css' />
<link rel='stylesheet' media='(max-width: 1599px) and (min-width: 800px)' href='URL_средний.css' />
<link rel='stylesheet' media='(max-width: 799px)' href='URL_маленький_экран.css' /></pre>

Размещение экрана как «пейзаж» (ширина больше высоты) и «портрет» (ширина меньше высоты)

<pre>@media all and (orientation:landscape) {
 /* стили для пейзажа */
}
@media all and (orientation:portrait) {
 /* стили для портрета */
}

или

<pre><link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
Previous Манипуляции с файлом .htaccess
Next 10 новых jQuery плагинов, которые нельзя пропустить

Suggested Posts

Woocommerce — интернет-магазин на WordPres

Создаем собственный шрифт из иконок для сайта

Плагин Jrating

45+ бесплатных материалов для веб дизайнеров за август 2016

Нужные инструменты: подборка php библиотек

Полезные плагины на WordPress для сервисов Google часть-2