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

    В процессе разработки интерфейса статические веб-страницы обычно необходимо адаптировать к устройствам с разным разрешением Обычно используемые адаптивные решения включают медиа-запросы, проценты ./remиvw vhpx

Один pxи окно просмотра

    В общем, когда мы пишем веб-страницы, наиболее часто используемой единицей для описания длины и ширины является пиксель ( px), в pcконце обычно считается, cssчто 1pxреальная длина представления фиксирована.

    На самом деле это не так, pxэто связано с устройством, например, 16pxкогда размер шрифта равен , pcразмер терминала и мобильного терминала разные.

   Итак, что определяет истинную длину css? 1pxПрежде всего, нам нужно знать, что такое пиксели и области просмотра.

1. Пиксель

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

   Чтобы прояснить cssотношения преобразования между пикселями и физическими пикселями, мы должны сначала понять, что такое окно просмотра.

2. Окно просмотра

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

(1) Окно просмотра макета

   Окно просмотра макета — это pcповедение макета по умолчанию для веб-страниц на мобильной стороне, поскольку обычно pcразрешение больше, а окно просмотра макета по умолчанию имеет значение 980px. viewportТо есть , если веб-страница не задана , pcвеб-страница на мобильном терминале будет отображаться на мобильном терминале по умолчанию на основе области просмотра макета.

(2) Визуальное окно просмотра

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

(3) Идеальное окно просмотра

   Идеальное окно просмотра — это лучшее «окно просмотра макета» с учетом физических элементов устройства.

   Какая связь между разрешением и физическими пикселями DPR?

DPR = 物理像素／分辨率

   Без масштабирования одному cssпикселю соответствует один dpr, то есть без масштабирования:

CSS像素 = 物理像素／分辨率

    В макете мобильного терминала мы можем viewportуправлять макетом с помощью метатегов, например, в обычных условиях мы можем использовать следующие теги, чтобы сделать макет мобильного терминала в идеальном окне просмотра:

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

width=device-width;Как правило, это означает ширину разрешения.С помощью этой настройки мы устанавливаем окно просмотра макета на идеальное окно просмотра.

имя атрибута	ценить	описывать
ширина	положительное число	Определяет ширину области просмотра макета в пикселях.
высота	положительное число	Определяет высоту окна просмотра макета в пикселях, обычно не используется.
начальный масштаб	[0,10]	Инициализируйте коэффициент масштабирования, 1 означает отсутствие масштабирования.
минимальный масштаб	[0,10]	минимальный коэффициент масштабирования
максимальный масштаб	[0,10]	Максимальный коэффициент масштабирования
масштабируемый пользователем	да нет	Разрешить ли ручное масштабирование страницы, значение по умолчанию — «да».

3. pxАдаптивный

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

2. Запросы СМИ

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

@media screen and (max-width: 960px){
    
    
    body{
    
    
      background-color:#6633FF;
    }
}

@media screen and (max-width: 768px){
    
    
    body{
    
    
      background-color:#00FF66;
    }
}
/*
    通过max-width设置样式生效时的最大分辨率，上述的代码分别对分辨率在0～768px以及768px～960px的屏幕设置了不同的背景颜色。
*/

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

3. Процент

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

   Самый важный вопрос css, чей процент является процентом подэлементов?

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

1, специальный анализ

Далее разберем на примерах

 <div class="box1">
        <div class="box2"></div>
    </div>

      .box1{
    
    
            width: 200px;
            height: 150px;
            background-color: darkseagreen;
        }

(1) Процент высоты и ширины дочернего элемента

   Когда есть только атрибуты ширины и высоты

.box2{
    
    
            width: 50%;
            height: 50%;
            background-color: darkslategray;
        }

    текущий результат:

(2) сверху и снизу, слева и справа

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

      .box2{
    
    
            width: 80px;
            height: 60px;
            position: relative;
            top: 50%;
            bottom: 50%;
            left: 50%;
            right: 50%;
            background-color: darkslategray;
        }

   Результат операции следующий:

(3) padding/margin

    При paddingустановке процента, будь то вертикальный или горизонтальный, он относится только к прямому родительскому элементу widthи тому подобному margin.padding

         .box2{
    
    
            width: 80px;
            height: 60px;
            position: relative;
            /*padding-left和padding-top均为60px，因为父元素的width为200px*/
            padding-left: 30%;
            padding-top:30%;
            background-color: darkslategray;
        }

   результат операции:

(4)border-radius

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

   .box2{
    
    
            width: 80px;
            height: 80px;
            position: relative;
            border-radius: 50%;
            background-color: darkslategray;
        }

    результат операции:

### 2. Применение макета в процентах

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

<div class="box1"></div>

     .box1{
    
    
            width: 600px;
            height: 0;
            padding-top:40%;
            background-color: darkseagreen;
        }
      /*任意缩放，盒子大小改变，高度比例不变*/

4. Адаптивные сценарииrem

1. remБлок

   remЭто гибкая и расширяемая единица, которая преобразуется браузером в пиксели и отображается. В отличие от единиц em, remединицы относятся только к размеру шрифта корневого элемента браузера (элемента HTML), независимо от уровня вложенности. По умолчанию htmlразмер шрифта элемента16px

   Для удобства расчетов обычно можно установить

    html{
    
      font-size:62.5%  }

   В этой ситуации,1rem=10px

2. remНедостатки макета

   В адаптивном макете размер jsкорневого элемента должен динамически контролироваться с помощью font-size.

   То есть между cssстилем и кодом jsсуществует определенная связь . font-sizeИ измененный код должен быть размещен cssперед стилем.

5. Осуществить самоадаптацию через vw/vh

    css3Введена новая единица vw/ vh, относящаяся к окну просмотра, vwуказывающая ширину относительно окна просмотра и vhуказывающая высоту относительно окна просмотра.

   vh vw и делятся на 100 равных частей по ширине и высоте окна, 100vhчто означает полную высоту и 50vhполовину высоты