Принцип и практика адаптивной верстки интерфейса

CSS

предисловие

Для фронтенд-разработчика адаптивная веб-разработка является одним из обязательных навыков. Реагирование имеет свои большие преимущества и некоторые недостатки. Это требует от нас идти на компромиссы при разработке. Для сайтов с меньшим содержанием и в основном для отображения принимается адаптивный тип, для сайтов с большим содержанием сайты управления разрабатываются отдельно, и для разных устройств используются разные наборы кодов. В этой статье в основном будут обсуждаться принципы и приемы адаптивной верстки, а также объединены примеры, чтобы усилить впечатление.

Отзывчивый и адаптивный

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

Что такое адаптивный макет?

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

  1. В то же время он подходит для ПК + планшета + мобильного телефона и т. д.;
  2. Навигация по вкладкам меняется на классическую навигацию по ящикам при приближении к портативным терминальным устройствам;
  3. Макет веб-сайта будет регулировать размер и положение модуля в соответствии с окном просмотра;
    在这里插入图片描述

Что такое адаптивная верстка?

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

  1. Большинство из них адаптируются только к основным N основным окнам просмотра одного терминала;
  2. Когда размер окна просмотра меньше установленного минимального окна просмотра, интерфейс будет казаться незавершенным и появится горизонтальный ползунок;
  3. Общая структура останется прежней, и будет меньше разделов со слишком большим количеством горизонтальных макетов.
    在这里插入图片描述

как выбрать

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

Преимущества адаптивной верстки: 1. Сильная гибкость 2. Это может быстро решить проблему приложения отображения нескольких устройств.

недостаток: 1. Эффективность низкая, а нагрузка на совместимые устройства большая 2. Код громоздкий и время загрузки будет больше 3. В определенной степени изменена исходная структура макета веб-сайта.

Преимущества адаптивной верстки: 1. Это лучше совместимо со сложностью веб-сайта 2. Код более эффективен 3. Тестирование и работа относительно просты и точны.

недостаток: 1. Один и тот же сайт требует разработки разных страниц для разных устройств, что увеличивает стоимость разработки.

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

Шаги дизайна адаптивного макета

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

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

2. Используйте@Медиазапросустановить стиль, который является ядром адаптивного макета

@media screen and (max-width: 1920px) { ... }

3. Установите точку разграничения макета, то есть управляйте макетом страницы, устанавливая различные стили ширины просмотра.

@media screen and (max-width: 1920px) { ... }

@media screen and (max-width: 1700px) { ... }

На самом деле он еще очень простой, но немного громоздкий при адаптации.

демаркационная точка макета

Для демаркационной точки запроса @Media это можно настроить в соответствии с вашим собственным проектом и установить демаркационную точку макета, подходящую для вашего собственного проекта. При установке точки разделения обратите внимание на последовательность.max-widthБольшее значение находится спереди, а меньшее — сзади; при использованииmin-widthКогда значение меньше, оно помещается впереди, а большее значение помещается сзади. Ниже перечислены некоторые контрольные точки макета, которые я установил во время разработки проекта:

@media screen and (max-width: 1920px) { ... }

@media screen and (max-width: 1700px) { ... }

@media screen and (max-width: 1600px) { ... }

@media screen and (max-width: 1440px) { ... }

@media screen and (max-width: 1280px) { ... }

@media screen and (min-width: 992px) and (max-width: 1200px) { ... }

@media screen and (min-width: 768px) and (max-width: 991px) { ... }

@media screen and (max-width: 767px) { ... }

когда мы используемmin-width, когда использоватьmax-widthШерстяная ткань? Вообще говоря, если это мобильное приложение, используйтеmin-width; Если предпочтительна сторона ПК, используйтеmax-width.

единица макета

Важно быть знакомым с распространенными единицами макета, включая пиксели (px), процент(%),em,rem,vw/vh. Мы можем разумно использовать эти компоновочные решения для повышения эффективности и качества нашей разработки.

пиксель

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

Пиксель CSS: абстрактная единица, используемая в CSS для веб-разработчиков; Физические пиксели: физические пиксели любого устройства фиксированы только в зависимости от аппаратной плотности устройства.

процент

Когда ширина или высота браузера изменяется, ширина и высота компонентов в браузере могут быть изменены с изменением браузера через процентную единицу, чтобы добиться адаптивного эффекта. Как правило, наше интуитивное понимание будет думать, что процент дочерних элементов полностью зависит от прямого родительского элемента.Это понимание не является проблемой, напримерheightа такжеwidthАтрибуты. Но в коробочной модели css более чемheightа такжеwidthсвойства иpadding,border,marginи другие свойства, так что это стоит подробно проанализировать.

Давайте сначала напишем html-код, а затем используем разные коды css, чтобы посмотреть, что получится:

<div class="parent">
    <div class="child">子元素</div>
</div>

1. Высота и ширина дочерних элементов

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

.parent{
    width: 200px;
    height: 200px;
    background: #aaaaaa;
}
.child{
    width: 50%;
    height: 50%;
    background: red;
}

在这里插入图片描述

2. Верх, низ, лево и право дочерних элементов

дочерний элементtopа такжеbottomЕсли задан процент, он относится к высоте родительского элемента, который позиционируется непосредственно нестатически (позиционируется по умолчанию); дочерний элементleftа такжеrightЕсли процент установлен, он относится к ширине непосредственно нестационарного позиционированного (позиционированного по умолчанию) родительского элемента.

.parent{
    width: 200px;
    height: 200px;
    background: #aaaaaa;
    position: relative;
}
.child{
    width: 50%;
    height: 50%;
    background: red;
    position: absolute;
    top: 50%;
    left: 50%;
}

在这里插入图片描述

3. Заполнение дочерних элементов

дочерний элементpaddingЕсли вы устанавливаете процент по вертикали или по горизонтали, он относится к непосредственному родительскому элементу.width, а родительский элементheightЭто не имеет значения.

.parent{
    width: 300px;
    height: 400px;
    background: #aaaaaa;
}
.child{
    width: 50%;
    height: 50%;
    background: red;
    padding-top: 20%;
    padding-left: 20%;
}

Открываем консоль и смотрим на дочерние элементы, мы видимpadding-topа такжеpadding-leftоба родительских элементаwidth20% - 60 пикселей:

在这里插入图片描述

4. Поля дочернего элемента

дочерний элементmarginа такжеpaddingто же самое, дочерний элементmarginЕсли установлено значение в процентах, как по вертикали, так и по горизонтали, оно относится к непосредственному родительскому элементу.width.

5. Радиус границы дочерних элементов

border-radiusУстановить в процентах относительно собственной ширины

.parent{
    width: 200px;
    height: 200px;
    background: #aaaaaa;
}
.child{
    width: 50%;
    height: 50%;
    background: red;
    border-radius: 50%;
}

在这里插入图片描述

Эм и Рэм

emа такжеremотносительноpxБолее гибкие, все они являются относительными единицами длины, и разницу между ними можно суммировать в одном предложении:emотносительно родительского элемента,remотносительно корневого элемента.emотносительно родительского элементаfont-size,remотносится к элементу htmlfont-size.

vw/vh

vw/vhединица измерения, связанная с окном просмотра,vwпредставляет ширину относительно окна просмотра,vhПредставляет относительно высоты окна просмотра, за исключениемvwа такжеvhКроме того, естьvminа такжеvmaxдве взаимосвязанные единицы.

единица измерения имея в виду
vw Ширина области просмотра составляет 100vw относительно ширины области просмотра.
vh Относительно высоты области просмотра высота области просмотра составляет 100vh.
vmin меньшее значение в vw и vh
vmax Большее значение vw и vh

Эта единица похожа на процент, но есть отличия:

единица измерения имея в виду
% Большинство из них относятся к элементам-предкам, но также и к самим себе (граница-радиус, перевод и т. д.).
vw/vm Размер относительно области просмотра

Практика адаптивного макета

Что ж, сказав так много, теперь мы можем объединить вышеуказанные теоретические знания, чтобы завершить демонстрацию адаптивного макета. Ниже я опубликую некоторый код, чтобы рассказать о некоторых идеях, полный код размещен в моемgithubнад.

первоначальный макет

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式布局实践</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="root">
    <!-- 头部 -->
    <header>
        <div class="header-box">
            <div class="logo">
                logo
            </div>
            <nav class="main-nav">
                <ul class="nav-list">
                    <li id="nav-item" class="main-nav-item">
                        <ul class="nav-main-list">
                            <li class="list-item">首页</li>
                            <li class="list-item">文章</li>
                            <li class="list-item">论坛</li>
                            <li class="list-item">娱乐</li>
                            <li class="list-item">联系</li>
                        </ul>
                    </li>
                    <li class="main-nav-login">
                        <div class="login-box">登录 | 注册</div>
                    </li>
                </ul>
            </nav>

        </div>
    </header>

    <!-- 内容 -->
    <div id="container">
        <div class="container-header"></div>
        <div class="content">
            <!-- 内容一-->
            <div class="content-box content-box1">
                <div class="content-box1-text"></div>
                <div class="content-box1-img">
                    <div class="img-radius"></div>
                </div>
            </div>
            <!-- 内容二-->
            <div class="content-box content-box2">
                <div class="content-box2-text"></div>
                <div class="content-box2-text"></div>
                <div class="content-box2-text"></div>
            </div>
            <!-- 内容三-->
            <div class="content-box content-box3">
                <div class="content-box3-text"></div>
                <div class="content-box3-text"></div>
                <div class="content-box3-text"></div>
                <div class="content-box3-text"></div>
                <div class="content-box3-text"></div>
                <div class="content-box3-text"></div>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <footer></footer>
</div>

</body>
</html>

В этой демонстрации начальный код CSS находится в1920pxЭто наш первоначальный стиль. Исходный код стиля довольно длинный, поэтому в статье он не будет размещен, см. здесь >>>index.cssДавайте посмотрим на первоначальный эффект:

在这里插入图片描述
В реальной разработке содержание, содержащееся в некоторых модулях, не позволяет бесконечно сокращать эти модули. Итак, в первоначальном макете index.css мы ограничили размер некоторых модулей и установилиmin-width.

Адаптация для среднего и большого экрана

Как мы упоминали ранее, демаркационная точка макета должна быть разделена в соответствии с реальным проектом.Я сделал следующее разделение для этого проекта, и вы также можете разделить его в соответствии с вашими собственными идеями.

1201px~1280px

Давайте сначала посмотрим на настройку ширины до1201pxЧто происходит, когда:

在这里插入图片描述
Мы видим, что некоторые модули превышают ширину родительского элемента, что делает страницу неровной, поэтому нам нужно настроить макет:

@media screen and (max-width: 1280px) {
     /* 内容一  */
    .content-box1{
        flex-wrap: wrap;
        height: 650px;
    }
    .content-box1-text{
        width: 90%;
        margin: 0 auto;
    }
    .content-box1-img{
        display: flex;
        align-items: center;
        margin: 0 auto;
    }
}

Еще раз посмотрим на раскладку:

在这里插入图片描述

992px~1200px

Что происходит в это время:

在这里插入图片描述
Мы видим, что макет снова перепутался, и тогда нам нужно продолжить настройку макета:

@media screen and (min-width: 992px) and (max-width: 1200px) {
    /* 内容二 */
    .content-box2{
        height: 400px;
    }
    .content-box2-text{
        height: 300px;
        min-width: 200px;
    }

    /* 内容三 */
    .content-box3{
        justify-content: space-around;
    }
}

Еще раз посмотрим на раскладку:

在这里插入图片描述

768px~991px

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

Адаптация мобильного терминала

В системе сетки boostrap поместите<768pxЭкран классифицируется как мобильный телефон. Мы также можем использовать это как ссылку. На данный момент корректировка макета — это не только корректировка контента, но и наша панель навигации тоже изменится — с горизонтальной панели навигации на вертикальную панель навигации, появляющуюся при клике (конкретные требования, конкретная реализация, вот только общий метод преобразования). Как показано ниже:

在这里插入图片描述
Что нам нужно сделать, чтобы добиться эффекта, показанного выше?

  1. Напишите кнопку, например кнопку в правом верхнем углу картинки справа, знакомо?
  2. Переписан стиль панели навигации, с горизонтальной панели навигации на вертикальную панель навигации;
  3. Используйте js, чтобы реализовать переключение между кнопкой нажатия и отображением и скрытием панели навигации.

кнопка

Начнем с имени классаnav-listДобавьте следующий HTML-код в конце:

...

<li class="phone-show">
    <div id="nav-btn" class="nav-btn">
        <span></span>
        <span></span>
        <span></span>
    </div>
</li>

...

Затем украсьте стиль кнопки:

@media screen and (max-width: 767px){
    ...
    .phone-show{
        display: block;
        height: 60px;
        width: 60px;
    }
    .nav-btn{
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .nav-btn span{
        display: inline-block;
        height: 10px;
        width: 60px;
        background: coral;
    }
}

Взгляните на эффект:

Изменение стиля навигации

Таким образом, мы можем разумно использовать взаимосвязь между относительным и абсолютным позиционированием для изменения стиля и положения панели навигации:

@media screen and (max-width: 767px){
    .header-box{
        position: relative;
    }
    
    ...
    
    /* 手机端样式 */
    .main-nav-item{
        display: none;
        position: absolute;
        width: 10rem;
        right: 0;
        top: 8rem;
        border-radius: 0 0 .5rem .5rem;
    }
    .nav-main-list{
        width: 100%;
        background: #ffffff;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        border-radius: 0 0 .5rem .5rem;
    }
    .list-item{
        width: 100%;
        margin: 0 1rem;
        border-bottom: 1px solid #eeeeee;
    }
}

Взгляните на эффект:

Панель навигации показывает и скрывает переключатель

Идея использования js для управления переключением очень проста: при открытии веб-страницы мы сначала прячем навигацию, а затем определяем переменнуюhide, начальное значение равноtrue, чтобы судить, когда кнопка нажата: еслиhideзначениеtrue, то навигация отображается, в противном случае она скрыта.

let btn = document.getElementById("nav-btn");
let  nav =  document.getElementById("nav-item");

let hide = true;

btn.addEventListener('click', function () {
    if (hide){
        nav.style.display = "block";
        hide = false;
    } else {
        nav.style.display = "none";
        hide = true;
    }
});

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

Ссылаться на

Вы знаете разницу между адаптивным и отзывчивым?

В чем разница между отзывчивым и адаптивным?

Сравнение распространенных решений для адаптивных макетов (медиа-запросы, проценты, rem и vw/vh)

наконец

Если есть какие-либо неточности или ошибки в тексте, пожалуйста, укажите~

Категории