Основной способ верстки веб-страницы

1. Статическая верстка (статическая верстка)

То есть в традиционном веб-дизайне размеры всех элементов на веб-странице указаны в пикселях.

1. Особенности компоновки

Независимо от конкретного размера браузера макет страницы всегда отображается таким, каким он был при первоначальном написании кода. Обычные веб-сайты для ПК имеют статический (фиксированной ширины) макет, то есть устанавливается минимальная ширина. В этом случае, если она меньше этой ширины, появится полоса прокрутки. Если она больше этой ширины, содержимое быть в центре, и фон будет добавлен.Этот вид дизайна распространен на стороне ПК.

2. Метод проектирования

ПК: компоновка по центру, все стили используют абсолютную ширину/высоту (в пикселях), разрабатывают компоновку и используют горизонтальные и вертикальные полосы прокрутки для просмотра маскированной части при настройке ширины и высоты экрана;
Мобильные устройства: Кроме того, создайте мобильный веб-сайт, создайте отдельный макет и используйте разные доменные имена, такие как wap или m.

Преимущества: этот метод макета является самым простым для дизайнеров и авторов CSS, и он не вызывает проблем с совместимостью.

Недостатки: Очевидные, то есть он не может выполнять различные действия в зависимости от размера экрана пользователя. В настоящее время большинство веб-сайтов порталов и сайтов по продвижению ПК большинства предприятий используют этот макет. Веб-страницы с фиксированным размером пикселя — это самый простой способ соответствовать дисплею с фиксированным размером пикселя. Но этот метод не является производственным методом, который полностью совместим с будущими веб-страницами, нам нужны некоторые методы для адаптации к неизвестным устройствам.

2. Жидкий макет

Особенность Liquid (также называемой «Fluid») заключается в том, что ширина элементов страницы регулируется в соответствии с разрешением экрана, но общий макет остается неизменным. Представитель системы забора (система сетки).

Размер основных разделенных областей на веб-странице указывается в процентах (с минимальной, Макс-свойства), например, установите ширину тела страницы на 80% и минимальную ширину на 960 пикселей. Изображения также обрабатываются аналогичным образом (ширина: 100%, максимальная ширина обычно устанавливается равной размеру самого изображения, чтобы предотвратить его растяжение и искажение).

1. Особенности макета

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

2. Метод проектирования

Используйте % процента для определения ширины, а высота в основном фиксируется в пикселях.Его можно настроить в соответствии с размером области просмотра в реальном времени и родительского элемента, чтобы максимально адаптироваться к различным разрешениям. Он часто используется с такими атрибутами, как max-width/min-width, для управления диапазоном размера потока, чтобы он не был слишком большим или слишком маленьким, чтобы влиять на чтение.

Этот метод компоновки использовался для работы с экранами ПК разных размеров в ранней истории разработки веб-интерфейса (разница в размерах экрана в то время была не слишком большой), а также это распространенный метод компоновки в сегодняшней разработке мобильных терминалов. , но недостатки очевидны: главная проблема заключается в том, что если размер экрана слишком велик, он не будет правильно отображаться на экране, который слишком мал или слишком велик по сравнению с его первоначальным дизайном. Поскольку ширина определяется в процентах, а высота и размер текста в основном фиксируются в px, поэтому эффект отображения под мобильным телефоном с большим экраном будет заключаться в том, что ширина некоторых элементов страницы растягивается очень долго, но высота и размер текста все тот же, что и в оригинале.то же самое (т.е. эти вещи не могут быть "потоковыми"), отображение очень несочетаемое

3. Адаптивный макет

Адаптивный макет характеризуется определением макетов для разных разрешений экрана, то есть созданием нескольких статических макетов, каждый из которых соответствует диапазону разрешений экрана. При изменении разрешения экрана можно переключаться между разными статическими частями (меняется положение элементов страницы), но в каждом статическом макете элементы страницы не меняются при изменении размера окна. Вы можете думать об адаптивных макетах как о серии статических макетов.

1. Особенности компоновки

При изменении разрешения экрана положение элементов на странице изменится, но размер не изменится.

2. Метод проектирования

Используйте медиа-запрос @media, чтобы переключать стили для устройств разных размеров и носителей. Благодаря отличному дизайну диапазона отклика он может обеспечить наилучшее взаимодействие с устройствами в пределах диапазона адаптации, и на самом деле это фиксированная компоновка для одного и того же устройства.

4. Адаптивный макет

С появлением технологии медиазапросов в CSS3 появилась концепция адаптивного дизайна. Цель адаптивного дизайна — обеспечить удовлетворительное отображение страницы на всех конечных устройствах (компьютерах всех размеров, телефонах, часах, веб-браузерах холодильников и т. д.). Реализация не ограничивается конкретными методами, а обычно представляет собой комбинацию потоковой передачи. макет + гибкий макет, а затем используется с технологией медиа-запросов. ——Определяйте макеты для разных разрешений экрана, и в то же время в каждом макете применяйте концепцию потокового макета, то есть ширина элементов страницы автоматически адаптируется по мере настройки окна. То есть: создайте несколько гибких макетов, каждый из которых соответствует диапазону разрешений экрана. Вы можете думать об адаптивном макете как о слиянии концепций дизайна гибкого макета и адаптивного макета.

Отзывчивость стала почти стандартом для хороших макетов страниц.

1. Особенности макета

Под каждое разрешение экрана будет свой стиль верстки, то есть будет меняться положение и размер элементов.

2. Метод проектирования

Медиа-запросы + потоковые макеты. Обычно @media media query и grid system (Grid System) используются для верстки с относительными единицами верстки, Фактически, это общий термин для технологии, которая сочетает в себе вышеупомянутые технологии, такие как отзывчивость и поток, чтобы возвращать разные стили разным устройств на одной веб-странице с помощью CSS.

Преимущества: адаптируйтесь к ПК и мобильным терминалам, если вы достаточно терпеливы, эффект будет идеальным.

Недостатки: (1) Медиа-запросы ограничены, то есть их можно перечислить, и они могут адаптироваться только к основной ширине и высоте. (2) Чтобы соответствовать достаточному размеру экрана, рабочая нагрузка немалая, и дизайн также требует нескольких версий.

Адаптивная страница добавит этот фрагмент кода в заголовок:

<meta name="applicable-device" content="pc,mobile">
<meta http-equiv="Cache-Control" content="no-transform ">

5. Гибкая компоновка (rem/em layout)

Разница rem/em: rem относится к размеру шрифта элемента html, а em относится к его родительскому элементу.
Используйте единицы em или rem для относительного макета, который является более гибким по сравнению с процентным соотношением % и может поддерживать нормальное отображение настройки и масштабирования размера шрифта браузера и т. д., поскольку em является относительным родительским элементом и не был повышен. [Когда китайские сайты создают веб-страницы, они привыкли использовать CSS для принудительного определения размера шрифта, чтобы гарантировать, что все видят одинаковый эффект. Большинство сайтов, включая порталы, такие как NetEase и Sohu, используют абсолютную единицу измерения px (пиксель). Однако, если учесть простоту использования веб-сайта, размер шрифта должен быть переменным, а некоторым людям с плохим зрением необходимо увеличить шрифт, чтобы четко видеть содержимое страницы. Однако IE, доминирующий на рынке большинства браузеров, не может настраивать размеры шрифтов, в которых в качестве единицы измерения используются пиксели. Иностранцы придают большое значение простоте использования веб-сайтов, и довольно много иностранных веб-сайтов использовали em в качестве единицы шрифта.
Особенностью этого типа макета является то, что размер каждого элемента, который оборачивает текст, находится в em/rem, в то время как размер основной разделенной области страницы по-прежнему указывается в процентах или пикселях (то же, что и «резиновый макет» или "статический/фиксированный макет". ). Ранние браузеры не поддерживали масштабирование всей страницы, в данном случае только увеличение размера текста внутри веб-страницы. Используйте единицы em/rem, чтобы сделать элемент, обтекающий текст, масштабируемым по мере масштабирования текста.
Высота шрифта по умолчанию в браузере обычно составляет 16 пикселей, то есть 1em:16px, но неудобно вычислять соотношение 1:16.Чтобы сделать единицу em/rem более интуитивно понятной, CSS-писатели часто устанавливают шрифты на 62,5%, например, при выборе При использовании rem для управления шрифтом сначала необходимо установить размер шрифта корневого узла html, поскольку размер шрифта по умолчанию в браузере составляет 16 пикселей * 62,5% = 10 пикселей. Таким образом, 1rem равен 10px, что удобно для расчета.
Еще одним преимуществом определения размера с помощью em/rem является то, что он более адаптируется к отступам/дополнениям в единицах шрифта или размерам полей/шрифта, установленным браузером (поскольку em/rem изменяются синхронно относительно размера шрифта). Например: p{ text-indent: 2em; }.
Гибкие макеты с использованием единиц rem также популярны на мобильных устройствах.
На самом деле, так называемая гибкая компоновка на мобильном терминале используется относительно неохотно. Причина популярности мобильного эластичного макета заключается в том, что единицу rem проще использовать при настройке размера и размера текста каждого элемента страницы (в зависимости от размера экрана). На самом деле, используя многообещающие единицы, такие как vw, vh и т. д., можно добиться идеального гибкого макета (и высота, и размер текста могут стать «плавающими»), и гибкий макет больше не нужен.

В заключение
1. Если вы делаете только сторону ПК, то статический макет (фиксированная ширина) — лучший выбор;
2. Если вы работаете на мобильном терминале, и дизайн не предъявляет высоких требований к высоте и отступу элементов, то гибкая верстка (rem+js) — лучший выбор, один css+один js для настройки размера шрифта ;
3. Если ПК и мобильный телефон совместимы, а требования очень высоки, то адаптивный макет — лучший выбор.Предпосылка состоит в том, что дизайн должен быть разработан по-разному в зависимости от высоты и ширины, а адаптивный макет должен отличаться в зависимости от медиа-запросы.

Справочная статья:woo woo woo.cn blog on.com/Zhu Zhenwei 9…