Хочется, чтобы сайт выглядел красиво не только на экране ноутбука, но на планшете и смартфоне. Поэтому важно научить его «приспосабливаться» к любой технике. И в этом поможет правильно выбранный тип верстки.
Существует четыре основных вида верстки сайта:
Каждая основана на своих принципах, поэтому подходит для решения разных задач.
Обеспечивает отображение страниц сайта с заданной шириной — она не меняется в зависимости от устройства, на котором открывают сайт.
Фиксированная верстка не дает возможно удобно просматривать страницы / code-flow.club
Если монитор слишком мал для отображения страницы полностью — на ней появится горизонтальная полоса прокрутки. Поэтому, чтобы прочитать текст или полностью увидеть картинку, придется постоянно ею пользоваться. Такого рода чтение удобным не назовешь: при прокрутке очень сложно держать в голове основную мысль и от этого можно быстро устать.
Такой способ хорош, если сайт будут просматривать на стационарных устройствах. Для мобильных он очень неудобен.
Технически этот тип верстки реализуется при помощи тега body, в котором задается конкретная фиксированная ширина width:
body {
width: 1000 px;
} Этот вариант отличается большей гибкостью по сравнению с предыдущим. Здесь не задается конкретный параметр ширины страницы, а определяются ее минимальное и максимальное значения.
Резиновая верстка / impuls-web.ru
Например, минимальная ширина страницы – 400 пикселей, а максимальная — 1000. В зависимости от параметров устройства и браузера страница растянется в этих пределах.
Для резиновой верстки используются значения max-width (максимальная ширина) и min-width (минимальная ширина). Точно также можно задать и высоту страницы: max-height (максимальная высота) и min-height (минимальная высота).
body {
width: 90%;
}
div {
min-width: 400 px;
max-width: 1000px;
} Этот тип верстки — динамический. Все элементы страницы автоматически меняются, учитывая параметры устройства, на котором просматривают сайт. Таким образом можно изменять не только высоту и ширину страницы, но и размер шрифта, цвета, размеры и расположение объектов.
Все элементы страницы автоматически меняются в зависимости от устройства / pxhere.com
Для адаптивной верстки используются не только теги, но и медиа-запросы (@media). Они позволяют автоматически определять тип устройства и разрешение экрана. С учетом этих данных страница отображается с подходящими параметрами:
@media all (max-width 1000px) {
div {
width: 900px;
}
}
@media all (min-width 400px) {
div {
width: 280px;
}
} Так, при ширине монитора больше 1000 пикселей размер элемента становится фиксированным — 900 пикселей. Аналогично при минимальной ширине в 400 пикселей он ограничивается 280 пикселями.
Это вариант с полной адаптацией сайта к любому устройству.
Отзывчивая верстка адаптирует сайт к любому виду устройства
В нем комбинируются решения и резиновой, и адаптивной версток. От первой берется процентное соотношение ширины компонентов, а от второй — медиа-запросы:
@media all (max-width 1000px) {
div {
width: 60%
}
}
@media all (min-width 400px) {
div {
width: 100%;
}
} Существует несколько средств, с помощью которых можно адаптировать сайт к параметрам браузера и устройства. Конечно, оптимальный вариант — их сочетание, но можно применять и что-то одно.
Относительные значения или единицы определяют размер шрифта и отступов не в сантиметрах и дюймах, а по отношению к условной величине, которую по умолчанию задает браузер. Давайте разберемся, каких видов бывают эти относительные единицы.
Для размеров и отступов
С их помощью можно определить:
Размеры и отступы удобнее всего определять в процентах. Например, можно определить параметр width, как 80% или 90%. Страница будет отображаться с этой шириной по отношению к исходному родительскому компоненту:
body {
width: 80%;
} Можно воспользоваться единицами vw и vh. Обе они обозначают, по сути, то же самое, что и проценты: в первом случае — 1% ширины, а во втором — 1/100 долю высоты экрана.
При выборе варианта vmin произойдет автоматическая подстановка минимальных значений vw и vh. Чтобы выбрать максимальные, воспользуйтесь vmax.
Учтите только, что эти единицы нужно использовать внутри тега div. Например, чтобы определить его высоту и ширину как 70% от размера экрана, пропишите 70vw и 70vh:
div {
width: 70 vw;
height: 70 vh;
} Для размера шрифта
Чтобы определить размер шрифта, часто используют единицу em. В ее основе — размер шрифта по умолчанию для устройства, с которого просматривают страницу. Например, если задать размер заголовка как 2em, то он будет вдвое крупнее основного шрифта страницы. Применение этой единицы поможет сделать чтение очень удобным.
В адаптивной верстке используется и еще одна единица — rem. Она расшифровывается как root em, то есть «em корневого элемента».
Главное отличие rem от em в том, что значение rem будет для всего документа одним и тем же. В том время, как em может быть разным в каждом элементе страницы.
Так, например, при определении размера h1 как 3em для корректного отображения параметр margin-left автоматически определяется как 0,333em. С помощью rem его можно задавать как 1rem и он будет соответствовать всем другим расстояниям между элементами на странице:
p { margin-left: 1rem }
h1 { font-size: 3em; margin-left: 1rem } Можно задать максимальные или минимальные размеры элемента на странице. То есть даже если продолжить увеличивать страницу, элемент не изменится в размерах. И наоборот, если монитор слишком мал, элемент не станет меньше своего минимального значения. Вместо этого на экране появится полоса прокрутки.
Напомним, что для определения ширины используются max-width и min-width, для высоты — max-height и min-height.
Например, определим высоту компонента div (параметр height) как 70%. Но если max-height задана как 2000px, то именно этот размер станет предельным. После его достижения высота расти не будет:
div {
height: 70%;
max-height: 2000px;
} В основе медиа-запросов лежат технические параметры устройств. С помощью этих конструкций можно автоматически определить, какие стили можно использовать на странице, а какие — не получится. С помощью медиа-запросов можно задать нужные свойства стилей для разных параметров:
Еще одна важная функция медиа-запросов — задать внешний вид страницы при выводе на печать. Они пригодятся, если при печати страница должна сильно отличаться от того, что мы видим на экране.
Существует несколько типов устройств, к которым можно «привязать» медиа-запрос. Самые распространенные это:
Есть и несколько других медиа-запросов, которые считаются устаревшими и практически не используются:
Все медиа-запросы имеют стандартную конструкцию. Для их работы нужно использовать каждый компонент в правильной последовательности.
Все медиа-запросы имеют стандартный синтаксис и состоят из:
Рассмотрим синтаксис подробнее.
Итак, если условий несколько, то используются логические операторы:
Последней составляющей медиа-запроса будет один или несколько параметров:
Итоговый вариант кода для ширины будет выглядеть так:
@media all (max-width 1100px) {
div {
width: 700px
}
}
@media all (max-width 300px) {
div {
width: 250px;
}
} Для ориентации страницы:
@media all (portrait) {
div {
width: 500px
}
}
@media all (landscape) {
div {
width: 1000px;
}
} Для соотношения ширины и высоты:
@media screen and (min-aspect-ratio: 239/100) {
main {
height: 80%;
}
} Для плотности пикселей:
@media print and (min-resolution: 300dpi) {
p {
text-decoration: underline;
}
} Чтобы сэкономить время и упростить работу начинающим верстальщикам, создали CSS-фреймворки. Они позволяют не прописывать все стили вручную, а загрузить готовый вариант в заголовок веб-страницы. Самые популярные:
Адаптивная верстка сделает сайт читабельным на любом типе устройств. Число параметров постоянно растет и превращает ее из полезной техники в насущную необходимость. При этом для ее использования не нужно быть продвинутым верстальщиком — здесь справится даже новичок.
Сегодня мы поговорим о том, как выбрать лучшие курсы Power BI в Украине, особенно для…
В 2023 году во всех крупнейших регионах конкуренция за вакансию выросла на 5–12%. Не исключением…
Unicorn Hunter/Talent Manager Лина Калиш создала бесплатный трекер поиска работы в Notion, систематизирующий все этапы…
Edtech-стартап Mate academy принял решение отправить своих работников в десятидневный отпуск – с 25 декабря…
Служба безопасности Украины задержала в Киеве 46-летнего программиста, который за деньги устанавливал шпионские программы и…
IT-специалист Джордан Катлер создал и выложил на Github подборку разнообразных ресурсов, которые помогут достичь уровня…