Как сделать разрешение на сайт

Как сделать разрешение на сайт

В 2006 году большинство пользователей имело экран монитора 800600. Но время неумолимо и в какой-то момент "нормальным" стал 1024768. У веб-ресурсов, ориентированных на меньшее разрешение, появилось пустое пространство по бокам. Всё большую популярность стали приобретать "резиновые" сайты, которые создаются путём использования

  1. @Media,
  2. относительных величин.
Благодаря им теперь не нужно искать оптимальную ширину сайта.

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

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

Макет с изначальными значениями блоков указан здесь. Добавим правила перед тегом </style>

@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;} / боковая колонка исчезает / } Вместо px лучше использовать em. Для чего значение px нужно разделить на значение font-size в px. Например, 1600/16=100, а именно media='(min-width: 100em)'.

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

<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' />

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

@media all and (orientation:landscape) { / стили для пейзажа / } @media all and (orientation:portrait) { / стили для портрета / } или <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
Как сделать разрешение на сайт 523
Как сделать разрешение на сайт 729
Как сделать разрешение на сайт 282
Как сделать разрешение на сайт 771
Как сделать разрешение на сайт 435
Как сделать разрешение на сайт 799
Как сделать разрешение на сайт 487
Как сделать разрешение на сайт 147
Как сделать разрешение на сайт 499
Как сделать разрешение на сайт 560
Как сделать разрешение на сайт 628
Как сделать разрешение на сайт 224
Как сделать разрешение на сайт 378
Как сделать разрешение на сайт 539
Как сделать разрешение на сайт 781
Как сделать разрешение на сайт 237
Как сделать разрешение на сайт 575
Как сделать разрешение на сайт 354
Как сделать разрешение на сайт 118

Похожие записи:

  • Как можно сделать паутину из человека
  • Как сделать себе рисунки на ногтях для начинающих
  • Омар хайям как поздравление с днем рождения
  • Выкройки маленькие куклы своими руками
  • Как часто ты даришь подарки