webdonsk.ruКак сделать фиксированную верстку сайта
Добавил пользователь Евгений Кузнецов Обновлено: 10.09.2024
Одним из методов верстки веб-страниц является табличная верстка сайта или табличный макет сайта – когда блоки информации расположены в ячейках макетной таблицы шириной во весь экран.
Табличная верстка сайта – достаточно распространенный на сегодняшний день метод верстки.
Если таблица служит для разметки страницы и оформления дизайна, то она называется макетной.
На рисунке 1 приведен внешний вид сайта, на рисунке 2 – зеленым цветом обозначена таблица, которая является основой макета этого сайта. Для того, чтобы макетную сетку не было видно, используется таблица с невидимой границей. Для этого в теге TABLE задается атрибут border="0".
Рисунок 1. Внешний вид сайта
Рисунок 2. Таблица, которая лежит в основе макета сайта
Все многообразие дизайна средствами таблиц можно свести к трем типам:
Выбор ширины таблицы зависит от ориентации на определенное разрешение мониторов пользователей. Так, для разрешения экрана по горизонтали 1024px – следует брать ширину макетной таблицы 960-980 пикселей, для ширины экрана1280px – ширину макетной таблицы можно взять 1200-1220px и т.д.
В этом случае сайт будет отображаться на экране целиком по ширине, на мониторах больших разрешений с обеих сторон макета сайта останется пустое место, на мониторах с меньшим разрешением внизу экрана будет появляться горизонтальная полоса прокрутки.
1. Реализуйте web-страничку на основе рисунков 3 и 4. Сохраните файл.
2. Изменяя размеры браузера, проанализируйте поведение макета.
Достоинство – используется все доступное пространство экрана, недостаток – при большом разрешении монитора текст сложно читать, т.к. строки получаются длинными, такую строку трудно отслеживать взглядом.
1. Реализуйте web-страничку на основе рисунков 5 и 6. Сохраните файл.
2. Изменяя размеры браузера, проанализируйте поведение макета.
3. Комбинированный дизайн сайта
1. Реализуйте web-страничку на основе рисунков 8 и 9. Сохраните файл.
2. Изменяя размеры браузера, проанализируйте поведение макета.
Чаще всего макетирующая составляющая состоит не из одной таблицы, а из нескольких определенным образом вложенных одна в другую. Это позволяет расширить возможности создания сложного дизайна, позволяет создавать макетные сетки сложной структуры.
Пример 4. Резиновый сайт с вложенными таблицами
1. Реализуйте web-страничку на основе рисунков 10 и 11. Сохраните файл.
2. Изменяя размеры браузера, проанализируйте поведение макета.
Контрольное задание
2. В верхней части сайта разместите бегущую строку.
3. В левой части сайта – меню, в правой части – содержимое web-страницы.
4. На каждой web-странице гиперссылку, ведущую на другую, созданную Вами страничку. Гиперссылки должны быть взаимными, т.е. с первой страницы должен быть переход на вторую страницу, а со второй страницы соответственно переход на первую страницу.
Виды верстки
Существует четыре основных вида верстки сайта:
- фиксированная;
- резиновая;
- адаптивная;
- отзывчивая.
Каждая основана на своих принципах, поэтому подходит для решения разных задач.
Фиксированная верстка
Обеспечивает отображение страниц сайта с заданной шириной — она не меняется в зависимости от устройства, на котором открывают сайт.
Фиксированная верстка не дает возможно удобно просматривать страницы / code-flow.club
Если монитор слишком мал для отображения страницы полностью — на ней появится горизонтальная полоса прокрутки. Поэтому, чтобы прочитать текст или полностью увидеть картинку, придется постоянно ею пользоваться. Такого рода чтение удобным не назовешь: при прокрутке очень сложно держать в голове основную мысль и от этого можно быстро устать.
Такой способ хорош, если сайт будут просматривать на стационарных устройствах. Для мобильных он очень неудобен.
Технически этот тип верстки реализуется при помощи тега body, в котором задается конкретная фиксированная ширина width:
Резиновая верстка
Этот вариант отличается большей гибкостью по сравнению с предыдущим. Здесь не задается конкретный параметр ширины страницы, а определяются ее минимальное и максимальное значения.
Например, минимальная ширина страницы – 400 пикселей, а максимальная — 1000. В зависимости от параметров устройства и браузера страница растянется в этих пределах.
Для резиновой верстки используются значения max-width (максимальная ширина) и min-width (минимальная ширина). Точно также можно задать и высоту страницы: max-height (максимальная высота) и min-height (минимальная высота).
Адаптивная верстка
Этот тип верстки — динамический. Все элементы страницы автоматически меняются, учитывая параметры устройства, на котором просматривают сайт. Таким образом можно изменять не только высоту и ширину страницы, но и размер шрифта, цвета, размеры и расположение объектов.
Для адаптивной верстки используются не только теги, но и медиа-запросы (@media). Они позволяют автоматически определять тип устройства и разрешение экрана. С учетом этих данных страница отображается с подходящими параметрами:
Так, при ширине монитора больше 1000 пикселей размер элемента становится фиксированным — 900 пикселей. Аналогично при минимальной ширине в 400 пикселей он ограничивается 280 пикселями.
Отзывчивая верстка
Это вариант с полной адаптацией сайта к любому устройству.
Отзывчивая верстка адаптирует сайт к любому виду устройства
В нем комбинируются решения и резиновой, и адаптивной версток. От первой берется процентное соотношение ширины компонентов, а от второй — медиа-запросы:
Техника адаптивной верстки
Существует несколько средств, с помощью которых можно адаптировать сайт к параметрам браузера и устройства. Конечно, оптимальный вариант — их сочетание, но можно применять и что-то одно.
Относительные значения
Относительные значения или единицы определяют размер шрифта и отступов не в сантиметрах и дюймах, а по отношению к условной величине, которую по умолчанию задает браузер. Давайте разберемся, каких видов бывают эти относительные единицы.
Для размеров и отступов
С их помощью можно определить:
- width — ширину;
- height — высоту;
- margin — расстояние от одного блока до другого;
- padding — отступ от содержимого до края блока.
Можно воспользоваться единицами vw и vh. Обе они обозначают, по сути, то же самое, что и проценты: в первом случае — 1% ширины, а во втором — 1/100 долю высоты экрана.
При выборе варианта vmin произойдет автоматическая подстановка минимальных значений vw и vh. Чтобы выбрать максимальные, воспользуйтесь vmax.
Учтите только, что эти единицы нужно использовать внутри тега div. Например, чтобы определить его высоту и ширину как 70% от размера экрана, пропишите 70vw и 70vh:
Для размера шрифта
Чтобы определить размер шрифта, часто используют единицу em. В ее основе — размер шрифта по умолчанию для устройства, с которого просматривают страницу. Например, если задать размер заголовка как 2em, то он будет вдвое крупнее основного шрифта страницы. Применение этой единицы поможет сделать чтение очень удобным.
Главное отличие rem от em в том, что значение rem будет для всего документа одним и тем же. В том время, как em может быть разным в каждом элементе страницы.
Так, например, при определении размера h1 как 3em для корректного отображения параметр margin-left автоматически определяется как 0,333em. С помощью rem его можно задавать как 1rem и он будет соответствовать всем другим расстояниям между элементами на странице:
Максимальные и минимальные размеры компонентов
Можно задать максимальные или минимальные размеры элемента на странице. То есть даже если продолжить увеличивать страницу, элемент не изменится в размерах. И наоборот, если монитор слишком мал, элемент не станет меньше своего минимального значения. Вместо этого на экране появится полоса прокрутки.
Напомним, что для определения ширины используются max-width и min-width, для высоты — max-height и min-height.
Например, определим высоту компонента div (параметр height) как 70%. Но если max-height задана как 2000px, то именно этот размер станет предельным. После его достижения высота расти не будет:
Как использовать медиа-запросы
В основе медиа-запросов лежат технические параметры устройств. С помощью этих конструкций можно автоматически определить, какие стили можно использовать на странице, а какие — не получится. С помощью медиа-запросов можно задать нужные свойства стилей для разных параметров:
- ширины окна браузера;
- альбомной или книжной ориентации;
- плотности пикселей и других.
Еще одна важная функция медиа-запросов — задать внешний вид страницы при выводе на печать. Они пригодятся, если при печати страница должна сильно отличаться от того, что мы видим на экране.
- all (все или по умолчанию);
- print (режим предварительного просмотра перед печатью);
- screen (цветные мониторы);
- speech (синтезаторы речи).
Есть и несколько других медиа-запросов, которые считаются устаревшими и практически не используются:
- braille (шрифт Брайля);
- embossed (принтеры для печати шрифтом Брайля);
- projection (проекторы);
- tty (фиксированный размер символов на устройстве);
- tv (экраны телевизоров);
- handheld (смартфоны).
Адаптивная верстка с помощью медиа-запросов CSS3
Все медиа-запросы имеют стандартную конструкцию. Для их работы нужно использовать каждый компонент в правильной последовательности.
Конструкция медиа-запроса
Все медиа-запросы имеют стандартный синтаксис и состоят из:
- @media (вводит медиа-запрос);
- одно или несколько условий, разделенных логическими операторами (определяет тип устройств);
- параметры.
Рассмотрим синтаксис подробнее.
Итак, если условий несколько, то используются логические операторы:
- and — выполняются все условия;
- or или , (запятая) — выполняется одно из условий медиа-запроса;
- not — отрицание условия.
Последней составляющей медиа-запроса будет один или несколько параметров:
- Ширина (width) — возможна минимальная или максимальная ширина (min-width / max-width).
- Высота (height) — аналогично возможна минимальная (min-height) или максимальная (max-height).
- Ориентация страницы (orientation) — как и в обычных документах, она может быть вертикальной (portrait) и горизонтальной (landscape).
- Cоотношение ширины и высоты элемента (aspect-ratio) — также может быть минимальной (min-aspect-ratio) и максимальной (max-aspect-ratio). Задается с помощью дроби, например: 16/9. Но учтите, что числа в дроби должны быть целыми.
- Определение разрешения экрана, то есть плотность пикселей (resolution). Можно использовать любую из единицу измерения: число точек на дюйм (dpi), на сантиметр (dpcm) или на пиксель (dppx).
Итоговый вариант кода для ширины будет выглядеть так:
Для ориентации страницы:
Для соотношения ширины и высоты:
Для плотности пикселей:
CSS-фреймворки
Чтобы сэкономить время и упростить работу начинающим верстальщикам, создали CSS-фреймворки. Они позволяют не прописывать все стили вручную, а загрузить готовый вариант в заголовок веб-страницы. Самые популярные:
Адаптивная верстка сделает сайт читабельным на любом типе устройств. Число параметров постоянно растет и превращает ее из полезной техники в насущную необходимость. При этом для ее использования не нужно быть продвинутым верстальщиком — здесь справится даже новичок.
Highload нужны авторы технических текстов. Вы наш человек, если разбираетесь в разработке, знаете языки программирования и умеете просто писать о сложном!
Откликнуться на вакансию можно здесь .
На данный момент табличная верстка сайтов уходит в прошлое и её активно вытесняет блочная верстка с помощью тегов DIV, в этом уроке я покажу вам пример DIV верстки с фиксированным дизайном.
Итак для начала давайте обсудим модель будущей страницы, она будет располагаться по центру, ширина будет фиксированной ровно 600 пикселей, наглядная модель на рисунке ниже:
Как вы понимаете модель довольно таки простая и сложных элементов в ней нет и если вы раньше верстали таблицами то после этого урока вы поймете насколько короче удобнее и красивее становится код вашего сайта.
Привет, друзья. Сегодня поговорим о том, как закрепить шапку сайта при прокрутке страницы. Наверняка вы все видели такой эффект, когда шапка сначала выглядит статичной, но когда вы начинаете изучать сайт и скролить, то она фиксируется в верхней части экрана и не покидает поле зрения.
В свое время было недостаточно знаний, чтобы подробно проработать все нюансы, но теперь сделаю, практически, все популярные эффекты, которые могут понадобится при реализации этого блока.
Давайте начнем с того, что напишем какую-то стандартную разметку шапки, подключим jQuery, чтобы легче было манипулировать javascript и добавим скрипт, в котором и будем управлять состоянием и положением шапки.
Вот структура моего проекта.
HTML разметка шапки
Для примера я придумал такую структуру.
Слева логотип, название сайта и его описание, а справа контактные телефоны, кнопка обратного звонка и кнопка меню. Типичная разметка для многих сайтов.
Дабавим немного стилей и получим такой внешний вид.
Пока, тут нет никаких особенностей. Это обычная шапка без дополнительных эффектов.
Исходник для изучения разметки, стилей и кода, как обычно, в конце статьи.
Теперь давайте подключим перед закрывающим тегом "body" jQuery и скрипт, в котором и будем писать js-код для управления состоянием и положением шапки.
Итак, давайте начнем с простейшего, добьемся того, чтобы шапка принимала статическое положение и перекрывала контент, который должен находится под ней.
Чтобы это сделать, у нас есть несколько подходов. Первый заключается в том, чтобы при прокрутке добавить шапке определенный класс, с новыми стилями, а второй в том, чтобы добавлять и удалять их прямо в js. Я считаю, что основные манипуляции с CSS нужно делать в таблице стилей, поэтому пойду первым путем, но для этого нужно показать стили шапки, которые я задал, чтобы вы лучше понимали, что происходит. Вот они.
Так выглядят стили для обертки шапки и блок с ее содержимым. За счет такой структуры мы легко сделаем шапку фиксированной, а ее содержимое продолжит оставаться в центре на любом устройстве.
Как я уже говорил, для того чтобы "header" стал фиксированным при прокрутке, ему нужно поменять позиционирование на "fixed". Для этого, при помощи метода "scrollTop()" мы проверим значение прокрутки в окне браузера и в нужный момент добавим шапке класс, в котором и изменим позиционирование.
Звучит страшнее чем кажется. На самом деле все достаточно просто. Давайте в таблицу стилей добавим класс, при помощи которого шапка будет получать position: fixed.
Обратите внимание, что z-index для того, чтобы при позиционировании шапка была над остальными элементами, я задал непосредственно классу header немного ранее.
Теперь давайте перейдем к написанию скрипта. Открывайте файл scripts.js и добавьте следующий код.
Здесь мы создаем переменную header и присваиваем ей наш элемент, в котором расположена шапка, чтобы было легче и удобнее им манипулировать. Затем пишем функцию, которая следит за прокруткой, и если мы прокрутили больше чем на 1 пиксели от начала окна браузера, то элементу с классом header добавляем недавно созданный класс "header_fixed", который и фиксирует шапку в верхней области экрана.
Начало положено. Теперь шапка при прокрутке ведет себя так, как нам нужно было и успешно фиксируется. Но мне не нравится рывок, который заметен, когда мы меняем позиционирование. Попробуйте покрутить.
Давайте исправим это. Происходи такое резкое смещение из-за того, что шапка занимала 90 пикселей и, соответственно, смещала контент вниз на 90 писклей, а когда мы прокрутили, мы вырвали из общего потока этот элемент и все сдвигается на его высоту. Чтобы этого избежать, предлагаю body, во время того, как шапка становиться фиксированной, дать отступ в 90 пикселей, которые мы теряем. Только я не буду топорно зашивать эту высоту в скрипт, а автоматический вычислю ее высоту и буду использовать это значение в вычислениях.
Опять же звучит страшно и заумно, но посмотрите, как все просто.
В 3 строке я получаю число с высотой шапки. На 8 строке, добавлю отступ тегу body, равный высоте шапки, чтобы скомпенсировать ее, в тот момент, когда мы вырываем из общего потока шапку и минеям ей позиционирование.
Когда прокручиваем страницу обратно, и скрипт удаляет класс header_fixed, я также удалю и, теперь, лишний отступ у тега body.
Надеюсь, понятно объяснил и теперь у вас нет никакого рывка, при скролле, а шапка плавно фиксируется и позиционируется в верхней области экрана.
Изменение высоты шапки и цвета
Теперь давайте разбираться, как при прокрутке изменить высоту шапки. Это достаточно популярный эффект, о котором вы меня часто спрашивали.
Наверное, вы догадались уже, что никакой магии тут нет и делается все аналогично тому, как мы уже это проделали выше. Просто выбираем расстояние от верхней точки окна браузера, на котором должен произойти тот или иной эффект и добавляем или удалим класс, отвечающий за этот эффект.
Но давайте на этот раз я не буду задавать отдельный класс, а покажу как изменить стили прямо в js. Итак, задача при прокрутке на 300 пикселей при помощи jQuery плавно изменить высоту шапки и ее цвет.
Как видите, благодаря методу ".css" можно манипулировать стилями прямо из jQuery. Отступ был по 15 пикселей сверху и снизу, а я заменил его на 5, за счет чего шапка стала меньше на 20 пикселей. Цвет сделал бледно желтым, а при помощи свойства transition сделал эффект перехода из одного состояния в другое более плавным.
Как удалить/скрыть элемент из шапки при прокрутке страницы
Этот вопрос мне также периодически задавали в соцсетях, поэтому решил вынести его в отдельный пункт. Наверняка вы уже догадались, если дочитали статью до этого момента. Ничего нового, увы, тут не будет. Все также, как выше. Получим id или class элемента и добавим ему свойства для скрытия. Например "display: none" в простейшем случае.
Для примера давайте скроем один из номеров телефонов. Это будет сложнее, так как у обоих номеров одинаковый класс. Напомню, блок с контактами у меня выглядит так:
Теперь давайте в js напишем код, отвечающий за скрытие одного из номеров. Пусть это событие случается, когда мы прокрутили окно на 500 пикселей, но давайте, чтобы не повторятся, будем не просто стили менять или классом манипулировать, а воспользуемся методами fadeIn|fadeOut для плавного скрытия и появления элемента.
Вот, что мы получили:
Вот такой, достаточно простой эфеект получился. Надеюсь, все основные нюансы по закреплению шапки учел. Если будут еще какие-то вопросы, задавайте в комментариях.
Область просмотра (viewport) - основная часть браузера, где отображается контент.
Чтобы @media запросы корректно работали на мобильных устройствах необходимо добавить специальный мета тег
Мета тег отвечает за размер области просмотра и масштаб страницы на мобильных устройствах
Мета тег размещаем в HTML файле в секции
Для мета тега добавляем атрибут content="" и указываем в нём необходимые свойства через запятую
width=device-width - область просмотра (viewport) будет равняться ширине мобильного устройства
initial-scale=1 - устанавливает масштаб страницы при первой загрузке
Этих свойств достаточно, чтобы @media запросы корректно работали на мобильных устройствах
Существуют дополнительные свойства, которые можно добавить для мета тега в атрибуте content=""
maximum-scale=3.0 - устанавливает максимально возможное значение масштабирования
minimum-scale=0.86 - устанавливает минимально возможное значение масштабирования
user-scalable=no - запрещает масштабирование
shrink-to-fit=no - исправляет отображение области просмотра (viewport) в браузере Safari на iOS
Как узнать размеры области просмотра (viewport)?
Для разработки и тестирования адаптивной вёрстки по размерам области просмотра (viewport) необходимо определить эти размеры
Браузеры Google Chrome и Mozilla Firefox имеют инструменты для тестирования адаптивной вёрстки, которые отображают размеры внутреннего окна и могут устанавливать необходимый размер окна по введенным значения
Чтобы открыть инструмент для адаптивной вёрстки в Mozilla Firefox нажимаем клавишу F12 и в инструментах разработчика в правом верхнем углу нажимаем на иконку со смартфоном и планшетом
Окно станет выглядеть следующим образом
В Google Chrome аналогично - нажимаем клавишу F12 и в инструментах разработчика в левом верхнем углу нажимаем на иконку со смартфоном и планшетом
Окно станет выглядеть следующим образом
@media запросы основаны на полной ширине окна браузера, включая полосы прокрутки - подробнее об этом в статье Плагин для отображения размеров окна браузера
Если кратко, то на мобильных устройствах и в браузерном инструменте для адаптивной вёрстки полоса прокрутки (scrollbar) не влияет на размеры контентной части, а в десктопных браузерах когда появляется полоса прокрутки (scrollbar), то она отнимает у контентной части около 17px. На мобильных контент будет на всю ширину браузера, а к примеру, на десктопных браузерах при ширине 1200px, если есть полоса прокрутки, то контентная часть будет около 1183px - этот нюанс не самый очевидный, но нужно его учитывать
@media запросы
Существует два подхода адаптивной вёрстки по размерам области просмотра (viewport) - Mobile First и Desktop First.
При Mobile First верстаем от меньшего экрана к большему и применяем @media (min-width: 1200px)
При Desktop First верстаем от большего экрана к меньшему и применяем @media (max-width: 1199.98px)
На практике Mobile First встречается реже, чем Desktop First, поэтому обычно сначала верстаем макет для больших экранов, затем с помощью @media запросов адаптируем макет под меньшие экраны, используя контрольные точки (breakpoints).
@media запросы записываются в CSS файле следующим образом
Разница в 0.02px нужна для избежания пересечения @media запросов, чтобы разные стили не применялись для двух разных @media запросов одновременно
Контрольные точки (breakpoints)
Для примера возьмем контрольные точки, которые используются в Bootstrap
Bootstrap использует @media запросы основанные на размерах большинства устройств, поэтому не обязательно придумывать свои контрольные точки, а при необходимости можно добавить еще @media запросы или изменить существующие
Логика адаптивной вёрстки Desktop First
Предположим, есть макет шириной 1170px. Верстаем его в браузере на большом экране. Пишем основные стили. Когда десктоп версия макета готова, начинаем делать адаптивную вёрстку.
Устанавливаем ширину окна браузера в 1200px - минимальная ширина до первого @media запроса @media (max-width: 1199.98px) < >.
Проверяем вёрстку при этих размерах. Если вёрстка соответствует макету, элементы не выходят за границы окна браузера, и не появляется горизонтальной полосы прокрутки, то продолжаем.
Устанавливаем ширину браузера в 992px - минимальная ширина до следующего @media запроса @media (max-width: 991.98px)
Делаем первый @media запрос - @media (max-width: 1199.98px)
При ширине окна браузера 992px элементы сужаются, выходят за границы окна браузера, создают горизонтальную полосу прокрутки (scrollbar). Поэтому внутри @media запроса @media (max-width: 1199.98px) < >начинаем переназначать предыдущие стили элементов так, чтобы вёрстка выглядела корректно - уменьшаем отступы, размер шрифта, какие-то элементы переносим или скрываем и так далее - все зависит от требований к макету.
Обратите внимание, что мы не должны переписывать все свойства элементов, а только переназначаем необходимые свойства
Если дизайнер не предоставил макеты на определенную ширину или заказчик не указал требования к адаптивной вёрстке, делаем на своё усмотрение, но соблюдая основную идею дизайна - уменьшать элементы и отступы пропорционально и переносить/скрывать блоки так, чтобы логика сохранялась
Когда вёрстка при ширине браузера 992px выглядит корректно, то устанавливаем браузеру ширину в 768px - минимальная ширина до следующего @media запроса @media (max-width: 767.98px) < >.
Переназначаем стили в блоке @media запроса @media (max-width: 991.98px) < >, чтобы вёрстка выглядела корректно теперь при ширине 768px
Далее устанавливаем ширину 576px и переназначаем стили в блоке @media (max-width: 767.98px)
Если дизайнер/заказчик не указали минимальную ширину для адаптивной вёрстки, то устанавливаем 320px. Для этой ширины переназначаем стили элементов в блоке @media запроса @media (max-width: 575.98px)
Когда вёрстка будет выглядеть корректно при всех вышеописанных размерах браузера (1200px, 992px, 768px, 576px, 320px), проверяем вёрстку плавно изменяя размер окна от большего к меньшему, чтобы убедиться что при промежуточных размерах вёрстка не ломается. При неоходимости корректируем стили элементов в том блоке @media запроса, где элементы отображаются некорректно, для этого используем инструменты разработчика (devtools) в браузере
Инструменты разработчика (devtools)
Инструменты разработчика позволяют быстро найти элемент, посмотреть его размеры, отступы, стили, расположение стилей, использование @media запросов, менять значение свойств прямо в браузере
Открыть инструменты разработчика можно нажатием клавиши F12
Чтобы просмотреть сразу расположение элемента и отобразить его свойства нажимаем правой кнокой мыши на элемент и выбираем Исследовать элемент в Mozilla Firefox или Просмотреть код в Google Chrome
Например, хотим узнать про элемент заголовка карточки, нажимаем на нём правой кнопкой мыши и выбираем Исследовать элемент в Mozilla Firefox
Открывается окно инструментов, где с левой стороны видим расположение элемента в HTML, а справой стороны CSS свойства элемента
Чтобы визуально посмотреть размеры и отступы элемента, в левой части инструментов разработчика наводим курсор мыши на элемент, и в браузере будут отображены свойства элемента
В правой части инструментов разработчика можно выбрать значение CSS свойства и назначить другое значение, в браузере сразу же будут видны изменения.
Значение можно писать вручную или постепенно менять значение стрелками вверх или вниз на клавиатуре.
При вводе значения вручную будут выводиться подсказки
Если значение некорректно и не применяется, то будет перечеркнуто
Можно самостоятельно отключить необходимое свойство, нажав на чекбокс перед этим свойством
Можно назначить новое свойство, нажав на пустое место в пределах блока свойств элемента. Также будут выведены подсказки возможных свойств
Все эти изменения сразу отображаются в браузере, что удобно при разработке и отладке адаптивной вёрстки. После перезагрузки страницы изменения сбрасываются
Также можно посмотреть расположение стилей - указывается имя файла, строка в файле и использование @media запросов
Простой пример адаптивной вёрстки
Полный пример на Codepen
Ниже распишу только ключевые моменты адаптивности
Начальные стили десктоп вёрстки при ширине 1200px
При ширине 992px карточки немного сужаются, но все еще отображаются корректно, поэтому пока без изменений
При ширине 768px карточки становятся очень узкими, поэтому переназначаем свойство карточки width , чтобы карточки отображались по две в ряд
При ширине 576px карточки также становятся узкими, поэтому снова переназначаем свойство карточки width чтобы карточки отображались по одной
При ширине 320px карточкам не хватает места, и они также выглядят довольно узкими, поэтому уменьшим внутренние отступы padding контейнера .container
Пример специально взял упрощенный, чтобы просто показать логику адаптивной вёрстки. Возможно, через некоторое время запишу видео с адаптивной вёрсткой более сложной секции и добавлю в эту статью
Дополнительно
Немного дополнительной информации по адаптивной вёрстке
@media запросы по размерам viewport могут быть как по ширине, так и по высоте, но используется обычно реже
@media запросы можно комбинировать, например нужны только стили для планшетных экранов в диапазоне от 576px до 767.98px
Стили назначенные в таком @media запросе будут применены только если все условия выполнены
Можно определять свойства сразу для нескольких разных условий - такой @media запрос выполняется если хотя бы одно из перечисленных условий выполнено, например экраны меньше 575.98px и больше 1440px
Для упрощения адаптивной вёрстки желательно использовать Flexbox, Grid.
Желательно стараться использовать не фиксированные, а относительные величины (%, vw, vh, em, rem и так далее)
Итоги
В статье разобрали основы адаптивной вёрстки, но этих знаний достаточно, чтобы начать делать адаптивную вёрстку.
На практике можно применять дополнительные возможности @media запросов отталкиваясь от уже полученной информации.
Читайте также: