Объяснение адаптивного макета

внешний интерфейс JavaScript CSS Отзывчивый дизайн

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

Значит, адаптивный макет бесполезен? Нет, когда мы просто открываем презентационное приложение с одной функцией, например, статическую страницу, адаптивный макет может быть лучшим выбором. Таким образом, адаптивная верстка стала превращаться из самого популярного решения в компромиссное решение.

Далее поговорим о том, как создать простой адаптивный макет.

Несколько основных факторов отзывчивого макета:

  • окно просмотра:

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

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no”/>

Что касается конкретного объяснения области просмотра, вы можете посмотреть это:Этот пиксель не тот пиксель.

  • Медиа-запросы (@media) устанавливают точки останова:

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

Использовать в таблице стилей:

@media (min-width: 481px) and (max-width:768px) {
    /*具体操作*/
}

Вызывается при подключении:

<link href="styles.css" rel="stylesheet" media="(max-width:480px)">

Импортировать с помощью @import:

@import url(styles.css) (max-width:480px)

Для конкретного использования учащиеся могут видетьУчебники от MDN.

  • Использование плавающей раскладки с плавающей сеткой потока:

Наиболее распространенным макетом ответа является использование макета с несколькими столбцами (сетка) на ПК, потому что макет сетки легко добавляет, удаляет или перемещает на другом устройстве экрана, адаптированном для реализации различных размеров экрана (например, маленький экран на компьютере). столбец, в то время как на большом экране есть три столбца), с шириной каждого столбца жидкий макет (иногда называемый эластичным макетом)widthИспользуйте проценты), чтобы соответствовать, потому что разные экраны имеют разную ширину. Затем используйте float для горизонтального выравнивания. К самому внешнему элементу обертки обычно добавляется максимальная ширина, чтобы большой экран ПК не был слишком широким, что приводило к чрезмерно большому объему содержимого страницы и затруднениям при чтении. Приблизительный код:

<main>
    <aside></aside>
    <article></article>
    <aside></aside>
</main>
<style>
    main{
        max-width:1200px;
    }
    aside{
        float:left;
        width: 20%;
    }
    article{
        float:left;
        width: 60%;
    }
</style>


Затем оцените размер экрана в соответствии с точкой останова, очистите поплавок для каждого столбца, удалите его или переместите вниз. Так как мы десктопные, медиазапрос размером с мобильный терминал, (конечно, он может быть и мобильным, и наоборот) Примерный код:

@media (max-width:481px) {
    aside {
        float: none;
        width: auto;
    }
    article{
        float: none;
        width: auto;
    }
}


Это очень просто?Это так называемая адаптивная верстка.Конечно код предельно упрощен, и деталей должно быть много. В дополнение к потоку макет с плавающей сеткой, гибкий макет, макет таблицы и т. д. могут обеспечить адаптивный дизайн. Используйте в зависимости от конкретной ситуации. Вот несколько предостережений:

Некоторые проблемы с адаптивной версткой:

  • Сброс модели коробки:

По умолчанию блочная модель веб-браузера не учитывает границы и отступы в области содержимого.width(кроме младших версий IE), при использовании потоковой верстки, то есть когда ширина столбца задана в процентах, это будет вызывать помехи, например первый столбец.widthЭто 60%, а вторая колонка 40%, изначально она просто умещается в одну строку, но если колонка задана с рамкой или отступом, общая ширина будет увеличена, а вторая колонка будет выдавлена. Итак, чтобы установитьbox-sizing：border;将Граница и отступ вычисляются в области содержимогоwidth, то есть 60% включает границы и отступы. Конечно, если это не слишком хлопотно, можно использовать и csscaleфункцию, но это может привести к проблемам с производительностью и не рекомендуется.

  • Последовательность HTML-кода:

Обратите внимание на порядок HTML-кода, потому что часто наша основная область содержимого размещается посередине, например:

<aside></aside>
<article></article>
<aside></aside>

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

<div>
    <article></article>
    <aside></aside>
</div>
<aside></aside>
div{
    float:left;
    width: 80%;
}
div article{
    float:right;
    width: 75%;
}
div aside{
    float:left;
    width: 25%
}
aside{
    float:left;
    width: 20%
}

  • Размер фото и видео:

Изображение также должно использовать процент, иначе оно выйдет за пределы макета. Как правило, используется max-width: 100%. ширина изображения будет ограничена шириной макета.Обратите внимание, что высота изображения не должна быть установлена.В противном случае, если высота фиксирована, изменение ширины изображения вызовет деформацию.Если высота не задана , пусть он автоматически меняется пропорционально ширине. Изменение размера изображения решено, но остается проблема, то есть маленькое изображение, которое хочет отобразить мобильный терминал, но необходимо загрузить большое изображение, что приводит к пустой трате трафика. Есть много решений, напримерimgНовейшиеsrcsetАтрибуты(Есть проблемы с совместимостью, IE вообще не поддерживает). Или используйте js, чтобы судить, чтобы получить разные картинки (беда). Используйте его по ситуации.

Наконец: если вы думаете, что это хорошо, не забудьте поставить лайк.


Категории