Дополнительные статьи см.: GitHub.com/elevenbeans…

предисловие

Я не вел блог еще месяц, и я ездил в Шанхай и Шанхай для своего первого гнезда.

Совпадает с недавней командой, чтобы иметь работу по обмену передней планировкой, затем быстро захватили возможность претендовать, а суммарную информацию.

О макете

базовая компоновка

0. Нормальная/схема документооборота

рано<table>, позже<div>, а затем семантические теги HTML5 располагаются сверху вниз.

1. Плавающая компоновкаfloat: left/right

Первоначально он был разработан для циклических макетов, но в настоящее время используется для макетов слева направо.

2. Абсолютный макетposition: absolute,position: fixed

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

3. Макет сетки сетки:display:grid

Для более систематической схемы компоновки см.:Woohoo. Я 3 от prussian.com/CSS/learn CS…

4. CSS3 Flex Flexbox Макет:display:flex

Для более систематической схемы компоновки см.:Уууу. Руан Ифэн.com/blog/2015/0…

Общие концепции компоновки и методы реализации

0. Статический макет

Статический макет: макеты веб-страниц всегда отображаются с фиксированным макетом и размером без использования схем flexbox, таких как Flex.

Реализация:

• Обычный/документооборот
• Плавающая компоновка
• абсолютная компоновка

Для ПК: обычно расположение по центру, все стили используют абсолютную ширину/высоту (px), когда ширина и высота экрана настроены, используйте полосу прокрутки для просмотра маскированной части;

Для мобильных устройств: отдельно создайте мобильный веб-сайт, разработайте отдельный макет, используйте другое доменное имя, например wap. или m., в<viewport meta>установить на этикеткеwidth, каждый элемент страницы также используетpxкак единица. Динамически изменяя теги с помощью JSinitial-scaleПропорционально масштабирует страницу, чтобы она просто заполнила весь экран.

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

Недостаток очевиден, он не может делать разные презентации в зависимости от размера экрана пользователя:

• Неудобная полоса прокрутки на узких экранах
• Широкий экран имеет большое пустое пространство, что не способствует использованию пространства.

Возьмите каштан:www.scu.edu.cn/(Конечно, не черная alma mater)

1. Схема потока

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

Реализация:

• Разрешить автоматически регулировать ширину веб-страницы:<meta name="viewport" content="width=device-width, initial-scale=1" />
• Не используйте абсолютные размеры (включая контейнеры/шрифты/изображения), используйте проценты, em, rem, vw, vh и т. д.
• Можно использовать гибкие блоки, такие как flex (не используйте px для размера)

Достоинства: Страница полноэкранная слева и справа.

Но недостатки очевидны:

• Используется процентное определение, поэтому эффект отображения на мобильном телефоне/планшете с большим экраном (или горизонтальным экраном) будет заключаться в том, что некоторые элементы страницы вытягиваются очень большими, но объем содержимого остается неизменным, что является разреженным и компактным. , а коэффициент использования пространства низкий.
• Если текст увеличить еще и в процентах, то общий эффект будет очень несогласованным (эффект старой машины).

Возьмите каштан:English.traditionaldaily.com/flight is 5/is…(Я привык к тому, что эту ссылку злоупотребляют)

2. Адаптивная верстка

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

Адаптивные макеты рассматриваются как набор статических макетов.

Метод реализации:

• метод статической компоновки
• Детектор разрешения (медиа-запрос/детектор на стороне сервера/UA)

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

Недостатки: Контейнер с одним макетом нельзя гибко масштабировать, и контейнер по-прежнему подвержен проблемам, упомянутым в статическом макете, без переключения макета.

Возьмите каштан:www.baidu.com/(Я думал, что этот пример будет сложно привести =,=)

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

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

Метод реализации:

• Схема потока
• CSS media query

Адаптивный макетСочетает в себе преимущества гибкой верстки и адаптивной верстки..

Недостатки: CSS-код громоздкий, имеет большую избыточность для конкретных устройств, подходит для блогдос-сайтов, не предъявляющих высоких требований к производительности для различных терминалов (особенно мобильных терминалов).

Возьмите каштан:elevenbeans.github.io/

О веб-дизайне

Цель макета, в конечном счете, состоит в том, чтобы служить цели веб-дизайна. Кстати, давайте поговорим об адаптивном дизайне (RWD) и адаптивном дизайне (AWD).

1. Адаптивный дизайн (RWD)

Wikipedia: Responsive web design (RWD) is an approach to web design which makes web pages render well on a variety of devices and window or screen sizes. Content, design and performance are necessary across all devices to ensure usability and satisfaction

«Прогрессивное улучшение», "один подходит всем"

Адаптивный дизайн основан на адаптивной верстке,Используйте один и тот же набор страниц для отображения нужного размера, макета (и даже функции) на различных устройствах разного размера.

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

Метод реализации:

• Адаптивный макет
• Обнаружение функций (для постепенного улучшения веб-функциональности)

Возьмите каштан:одиннадцать бобов.GitHub.IO/,

2. Адаптивный дизайн (AWD)

Wikipedia: Adaptive web design is a process of server-side detection that chooses a design layout and size to display. All types of web design layouts can be used, including responsive layout. The adaptive design will serve different versions of the site to different devices based on common screen sizes and resolutions. The only difference is the way the design is looked at from a collateral or device viewpoint rather than the responsive web design (RWD) one-size-fits-all approach to layout

"Все виды макетов веб-дизайна", «разные версии для разных устройств»,

Адаптивный дизайнСервер определяет тип устройства и выбирает наиболее подходящую версию макета/размера дизайна для типа устройства из различных версий сайта для отображения.Он работает со всеми (включая адаптивные) схемами макета.

Метод реализации:

• server-side detection
• different versions to different devices
  Для ПК: доступна раскладка потоковой передачи;
  Для мобильных устройств: можно использовать гибкий макет. Рекомендуется раствор Rem:
  • Установите размер элемента (который может включать шрифты и т. д.) наrem(remследует элементfont-sizeбазовый блок)
  • В соответствии с различной шириной экрана JS динамически устанавливается<html>изfont-sizeразмер, элемент также будет увеличиваться и уменьшаться пропорционально ширине экрана

Возьмите каштан:www.trip.com/

Сходства и различия между RWD и AWD

Тот же пункт:

• Различные стили и макеты используются для разных разрешений/устройств для достижения наилучшего отображения страницы.
• Макет практически такой же (AWD также включает адаптивный макет)

разница:

• Первый делает упор на совместимое с несколькими терминалами отображение одного и того же набора страниц, а второй обеспечивает несколько наборов страниц и классифицирует разные устройства.
• Первый — это определение разрешения с помощью запроса CSS Media, который может реагировать на изменения размера браузера в режиме реального времени и изменять размер/макет элемента, а второй — обычно обнаружение на стороне сервера, которое одновременно отображает заданный макет и стиль.

Reference

1. «Отзывчивый веб-дизайн», википедия,En. Wikipedia.org/wiki/Respon…;
2. «Адаптивный веб-дизайн», википедия,En. Wikipedia.org/wiki/Чихать…;
3. «Об адаптивном веб-дизайне и идеях реализации», блог Сюн Цзянгана,blog.coding playboy.com/2018/01/06/…;
4. «Отзывчивый веб-дизайн? Адаптивный веб-дизайн? Не отчаивайтесь!», Elegant MicroWeb,woohoo.LinkedIn.com/pulse/плеск горячей воды…;
5. «Отзывчивый веб-дизайн», блог Руан Ифэн,Вууху. Руань Ифэн.com/blog/2012/0…;