Как изменить размер веб страницы html

В этой статье рассмотрим, как можно задавать ширину и какими свойствами стоит делать это. Для первого примера возьмём блочный элемент div. По умолчанию он имеет высоту равную нулю (если ничего не содержит) и занимает 100% ширины родительского элемента. Попробуем задать ему ширину в 200 пикселей и высоту в 150. Для этого используем CSS свойства width (ширина) и height (высота):

<div style="width: 200px; height:150px;"></div>

Получится такой результат:

Можно задавать ширину не только в пикселях, но и в процентах от ширины родительского элемента. Попробуем сделать это:

<div style="width: 40%; height:150px;"></div>

Получится такой результат:

К сожалению, задать высоту для блочного элемента в процентах не получится. Если написать «height:50%;», то в разных браузерах будет диаметрально противоположный результат, поэтому лучше считать такую запись ошибкой.

Только у одного элемента можно задать свойство height в процентах, а точнее у псевдоэлементов :before и ::after. Читайте о них в статье Псевдоэлементы (:before, ::after)

Максимальная и минимальная ширина (max-width и min-width)

Жёсткое ограничение ширины — это не лучший способ строить сайт. Потому что в таком случае появятся проблемы с адаптацией под мобильные и планшеты: ширина экрана может быть меньше ширины блока. Тогда часть сайта будет выходить пределы вёрстки сайта и появится горизонтальная прокрутка, чего у версии сайта на мобильном быть не должно. Поэтому вместо жёсткого задания ширины используется ограничение сверху через CSS свойство max-width. Мы знаем, что блочный элемент div пытается занять всю ширину родительского элемента, как будто по умолчанию у него есть свойство width и оно имеет значение 100%.

<div style="max-width: 400px; height:50px;"></div>

Результат будет аналогичен предыдущему примеру:

Но теперь, если вы возьмёте окно своего браузера и сузите до 400 пикселей и меньше, то увидите как контейнер div уменьшает свои размеры, чтобы не выпрыгивать за пределы вёрстки. Если же изменить «max-width:400px;» на «width:400px», то блок будет выходить за пределы родительского элемента:

По смыслу свойство min-width является диаметрально противоположным к max-width. Оно ограничивает минимальную ширину элемента, но не ограничивает максимальную.

Максимальная и минимальная высота (max-height и min-height)

Для блока div можно задать максимальную высоту. Это делается в том случае, если контента в блоке будет слишком много и есть вероятность, что он испортит вёрстку сайта. Ведь у контейнера div высота изменяется автоматически в зависимости от того, сколько занимает места его дочерние элементы.

Рассмотрим наглядный пример необходимости использования max-height. Допустим, что нам надо сделать чат, где пользователи сайта смогут обмениваться текстовыми сообщениями. Для этого нужно создать контейнер, который будет расти по мере появления в нём новых сообщений. Но как только div достигает определённой высоты, то перестаёт расти и появится полоса прокрутки. Используем следующий CSS код:

<div style="width: 300px; max-height: 100px; 
overflow-y: scroll;"  contenteditable="true">
   Тише, мыши, кот на крыше,
   а котята ещё выше.
   Кот пошёл за молоком,
   а котята кувырком.
   Кот пришёл без молока,
   а котята ха-ха-ха. 
</div>

Весь текст не вместится в div. Поэтому из-за свойства «overflow-y: scroll;» появится полоса прокрутки:

Тише, мыши, кот на крыше,
а котята ещё выше.
Кот пошёл за молоком,
а котята кувырком.
Кот пришёл без молока,
а котята ха-ха-ха. 

Благодаря атрибуту contenteditable=»true» у тега div в примере, Вы можете изменить текст внутри контейнера. Попробуйте удалить и добавить несколько строк. Размер контейнера будет подстраиваться под количества текста в нём до тех пор, пока не станет быть равен 100px. Затем появится полоса прокрутки.

По смыслу свойство min-height является диаметрально противоположным к max-height. Оно ограничивает минимальную высоту элемента, но не ограничивает максимальную.

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

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

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

@Media CSS

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

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

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

@media (max-width: 930px) { 
  .content-wrapper {padding: 0;} 
}

@media (max-width: 930px) and (min-width: 470px) {  
  aside {position: static; width: 100%; background: #ccc;} 
}

@media (max-width: 469px) { 
  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">