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


Добавлено: 14.09.2018, 00:08 / Просмотров: 54294
Закрыть ... [X]

В 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">
Источник: http://shpargalkablog.ru/2010/12/shirina-saita-css.html


Как выбрать ширину сайта? Как выбрать размер сайта по


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

Похожие новости


Как сделать сервер на самп 0 3 7
Как на фотошопе глаза сделать голубыми
Беседка с нуля своими руками
Юлия миняева томатный сок в домашних условиях
Мормышка своими руками для зимней рыбалки
Браслет своими руками из бисера имена
Как сделать свою группу платной




ШОКИРУЮЩИЕ НОВОСТИ