Мобильный интерфейс и адаптивный интерфейс
- px, эм, рем
- блочная модель w3c и т. е. блочная модель
- Мобильный стиль Очистить
- настройки области просмотра
- медиа-запрос
- Общие макеты на мобильных устройствах
-
- адаптивный макет
- схема потока
- гибкий макет
- Макет сетки
-
- Создайте контейнер Grid
- строки шаблона сетки и столбцы шаблона сетки
- сетка-шаблон
- зазор между строками, зазоры в столбцах и зазоры
- сетка-столбец-начало и сетка-столбец-конец и сетка-строка-начало и сетка-строка-конец
- сетка-область
- сетки-шаблоны-области
- выравнивание содержимого и выравнивание содержимого и размещение содержимого
- выравнивание элементов и выравнивание элементов и размещение элементов
- сетка-автопоток
- рем-макет
px, эм, рем
- 1 ÷ размер шрифта родительского элемента × значение в пикселях для преобразования = em
- Размер шрифта по умолчанию в браузере Chrome составляет 16 пикселей.
пикс.
1px это пиксель
Эм
Em относится к единице размера шрифта родительского узла.
<html>
<head>
<style>
.container{
font-size:10px;
}
span{
font-size:1.5em;
}
</style>
</head>
<body>
<div class="container">
<span>helloworld</span>
<!-- 15px -->
</div>
</body>
</html>
бэр
rem — единица относительно размера шрифта корневого узла <html>
блочная модель w3c и т. е. блочная модель
box-sizing: контент-бокс | бордюр-бокс;
боксовая модель w3c
высота и ширина — это фактическая высота и ширина содержимого без учета отступов и границ.
т. е. ширина = содержимое
блочная модель IE
высота и ширина включают отступы и границы
即width=content+padding+border
Мобильный стиль Очистить
Убрать стиль щелчка по фону на мобильном терминале
a{
-webkit-tap-highlight-color:transparent;
}
Удалить стили iOS
input,button{
-webkit-appearance:none;
}
Отключить всплывающее меню длительного нажатия
img,a{
-webkit-callout:none;
}
настройки области просмотра
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
| поле | объяснять |
|---|---|
| ширина = ширина устройства | Установить ширину области просмотра равной ширине устройства |
| начальный масштаб | начальный коэффициент масштабирования |
| максимальный масштаб | Максимальный коэффициент масштабирования |
| масштабируемый пользователем | Разрешить ли пользователям масштабировать |
медиа-запрос
Тип оборудования
- все
- экран
- Распечатать
- речь для скринридеров
грамматика
@устройство контроля грамматики медиа
@media not|only mediatype and (expressions){
//css代码...
}
Устройство контроля синтаксиса @import
@import url("./screen.css") screen;
оборудование для контроля маркировки стиля
<style media="mediatype and not|only (expressions)">
</style>
linkTag оборудование для мониторинга
<link rel="stylesheet" href="file.css" media="mediatype and not|only (expressions)">
Общие макеты на мобильных устройствах
адаптивный макет
Реализует класс сетки Bootstrap
конфигурация сетки
| <768 пикселей | ≥768px | ≥992px | ≥1200px | |
|---|---|---|---|---|
| Максимальная ширина контейнера | авто | 750 пикселей | 970 пикселей | 1170 пикселей |
| Максимальная ширина столбца | авто | 60 пикселей | 78 пикселей | 95 пикселей |
| ширина зазора | 30 пикселей | 30 пикселей | 30 пикселей | 30 пикселей |
образец кода
<!DOCTYPE html>
<html>
<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, user-scalable=no, maximum-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.container{
margin: 0 auto;
height: auto;
}
.fuild-container{
width: 100%;
height: auto;
}
.fuild-container .row{
padding: 0;
}
.row{
width: 100%;
height: auto;
padding: 0 15px;
box-sizing: border-box;
}
.row::after{
clear: both;
display: block;
content: "";
}
</style>
<style>
@media screen and (min-width:1200px){
.container{
width: 1170px;
}
.col-lg-12,.col-lg-11,.col-lg-10,.col-lg-9,.col-lg-8,.col-lg-7,.col-lg-6,.col-lg-5,.col-lg-4,.col-lg-3,.col-lg-2,.col-lg-1{
float: left;
height: auto;
}
.col-lg-12{
width: calc(100% / 12 * 12);}
.col-lg-11{
width: calc(100% / 12 * 11);}
.col-lg-10{
width: calc(100% / 12 * 10);}
.col-lg-9{
width: calc(100% / 12 * 9);}
.col-lg-8{
width: calc(100% / 12 * 8);}
.col-lg-7{
width: calc(100% / 12 * 7);}
.col-lg-6{
width: calc(100% / 12 * 6);}
.col-lg-5{
width: calc(100% / 12 * 5);}
.col-lg-4{
width: calc(100% / 12 * 4);}
.col-lg-3{
width: calc(100% / 12 * 3);}
.col-lg-2{
width: calc(100% / 12 * 2);}
.col-lg-1{
width: calc(100% / 12 * 1);}
.lg-hide{
display: none;}
}
@media screen and (min-width:992px) and (max-width:1200px){
.container{
width: 970px;
}
.col-md-12,.col-md-11,.col-md-10,.col-md-9,.col-md-8,.col-md-7,.col-md-6,.col-md-5,.col-md-4,.col-md-3,.col-md-2,.col-md-1{
float: left;
height: auto;
}
.col-md-12{
width: calc(100% / 12 * 12);}
.col-md-11{
width: calc(100% / 12 * 11);}
.col-md-10{
width: calc(100% / 12 * 10);}
.col-md-9{
width: calc(100% / 12 * 9);}
.col-md-8{
width: calc(100% / 12 * 8);}
.col-md-7{
width: calc(100% / 12 * 7);}
.col-md-6{
width: calc(100% / 12 * 6);}
.col-md-5{
width: calc(100% / 12 * 5);}
.col-md-4{
width: calc(100% / 12 * 4);}
.col-md-3{
width: calc(100% / 12 * 3);}
.col-md-2{
width: calc(100% / 12 * 2);}
.col-md-1{
width: calc(100% / 12 * 1);}
.md-hide{
display: none;}
}
@media screen and (min-width:768px) and (max-width:992px){
.container{
width: 750px;
}
.col-sm-12,.col-sm-11,.col-sm-10,.col-sm-9,.col-sm-8,.col-sm-7,.col-sm-6,.col-sm-5,.col-sm-4,.col-sm-3,.col-sm-2,.col-sm-1{
float: left;
height: auto;
}
.col-sm-12{
width: calc(100% / 12 * 12);}
.col-sm-11{
width: calc(100% / 12 * 11);}
.col-sm-10{
width: calc(100% / 12 * 10);}
.col-sm-9{
width: calc(100% / 12 * 9);}
.col-sm-8{
width: calc(100% / 12 * 8);}
.col-sm-7{
width: calc(100% / 12 * 7);}
.col-sm-6{
width: calc(100% / 12 * 6);}
.col-sm-5{
width: calc(100% / 12 * 5);}
.col-sm-4{
width: calc(100% / 12 * 4);}
.col-sm-3{
width: calc(100% / 12 * 3);}
.col-sm-2{
width: calc(100% / 12 * 2);}
.col-sm-1{
width: calc(100% / 12 * 1);}
.sm-hide{
display: none;}
}
@media screen and (max-width:768px){
.container{
width: auto;
}
.col-xs-12,.col-xs-11,.col-xs-10,.col-xs-9,.col-xs-8,.col-xs-7,.col-xs-6,.col-xs-5,.col-xs-4,.col-xs-3,.col-xs-2,.col-xs-1{
float: left;
height: auto;
}
.col-xs-12{
width: calc(100% / 12 * 12);}
.col-xs-11{
width: calc(100% / 12 * 11);}
.col-xs-10{
width: calc(100% / 12 * 10);}
.col-xs-9{
width: calc(100% / 12 * 9);}
.col-xs-8{
width: calc(100% / 12 * 8);}
.col-xs-7{
width: calc(100% / 12 * 7);}
.col-xs-6{
width: calc(100% / 12 * 6);}
.col-xs-5{
width: calc(100% / 12 * 5);}
.col-xs-4{
width: calc(100% / 12 * 4);}
.col-xs-3{
width: calc(100% / 12 * 3);}
.col-xs-2{
width: calc(100% / 12 * 2);}
.col-xs-1{
width: calc(100% / 12 * 1);}
.xs-hide{
display: none;}
.row{
padding: 0;}
}
</style>
</head>
<body>
<div class="fuild-container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3" style="background-color: red;">1</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3" style="background-color: blue;">2</div>
</div>
</div>
</body>
</html>
схема потока
Используйте максимальную ширину и минимальную ширину для масштабирования, установив ширину родительского контейнера на 100%.
гибкий макет
Концепция оси и направление гибкости
Поперечная ось шпинделя
По умолчанию: горизонтальная ось является главной осью, а вертикальная ось — поперечной осью.
flex-направление: строка | колонка | ряд-обратный | обратная колонка
ряд: горизонтальная ось является главной осью, а вертикальная ось является поперечной осью
столбец: вертикальная ось — это главная ось, а горизонтальная ось — это поперечная ось.
row-reverse | column-reverse: Аналогично обычным правилам, но внутренние поля расположены в обратном порядке.
По умолчанию гибкий макет изменит размер дочернего элемента.
Если единица измерения направления поперечной оси не определена, длина элемента в направлении поперечной оси будет растянута на 100 %.
Когда размер родительского элемента меньше суммы размеров дочернего элемента, дочерний элемент будет переполняться в направлении поперечной оси.
flex-wrap и flex-flow
flex-wrap: обернуть | без упаковки
Этот атрибут используется для установки переноса элемента при заполнении главной оси.
flex-flow: перенос строк
Это свойство является сокращением для свойства flex-wrap flex-directrion.
выравнивание содержания
Это свойство используется для установки выравнивания дочерних элементов по главной оси.
| имя атрибута | выравнивание |
|---|---|
| гибкий старт | Расставить из начального положения главной оси |
| гибкий конец | Располагать от конечного положения главной оси |
| центр | Все элементы располагаются последовательно по центру главной оси |
| пространство вокруг | Все элементы разнесены, но расстояние от границы до первого и последнего элементов равно 1/2 расстояния между средними элементами |
| пространственно-равномерно | Все элементы расположены с промежутками, а все зазоры в направлении главной оси равны. |
| пространство между | Крайний левый и крайний правый элементы соответствуют левой и правой границам, а средние элементы расположены на одинаковом расстоянии друг от друга. |
выравнивание элементов и выравнивание содержимого
Свойства align-items и align-content используются для управления выравниванием элементов по поперечной оси.
| имя атрибута align-items | выравнивание |
|---|---|
| гибкий старт | Расставить из начального положения поперечной оси |
| гибкий конец | Располагать от конечного положения поперечной оси |
| исходный уровень | Выровнять по базовой линии дочернего элемента |
| центр | в центре контейнера |
| потягиваться | Элемент растягивается, чтобы соответствовать контейнеру |
| имя атрибута align-content | выравнивание |
|---|---|
| гибкий старт | Расставить из начального положения поперечной оси |
| гибкий конец | Располагать от конечного положения поперечной оси |
| центр | в центре контейнера |
| потягиваться | Элемент растягивается, чтобы соответствовать контейнеру |
| пространство вокруг | Все элементы разнесены, но расстояние от границы до первого и последнего элементов равно 1/2 расстояния между средними элементами |
| пространственно-равномерно | Все элементы расположены с промежутками, а все зазоры в направлении главной оси равны. |
| пространство между | Крайний левый и крайний правый элементы соответствуют левой и правой границам, а средние элементы расположены на одинаковом расстоянии друг от друга. |
align-items применяется ко всем flex-контейнерам
align-content применим только к одной строке. При наличии нескольких элементов установка align-content выровняет все элементы как единое целое, аналогично justify-content.
выровнять себя
В отличие от align-items и align-content, align-self выравнивает только объект операции, тогда как первые два выравнивают всю строку или столбец.
flex-grow & flex-shrink & flex-basis & flex & order
Свойство flex-grow используется для выделения оставшегося пространства элемента на главной оси, и значение по умолчанию равно 0.
Устанавливает значение flex-grow равным n, сумме m значений flex-grow элементов, у которых установлен flex-grow. Затем элемент с установленным атрибутом flex-grow (flex-grow≠0) будет добавлен в n/m раз больше ширины оставшегося пространства.
Когда сумма значений атрибута flex-grow всех flex-элементов меньше 1, m равно 1
Атрибут flex-shrink используется для установки коэффициента сжатия, когда общая ширина дочернего элемента больше, чем ширина основной оси родительского элемента, а значение по умолчанию равно 1.
flex-shrink используется для установки коэффициента усадки элемента, а вес усадки каждого элемента равен flex-shrink*ширина/общий вес.
Фактическая ширина усадки = (гибкая усадка * ширина / общий вес) * ширина
Когда сумма значений атрибута flex-shrink всех flex-элементов меньше 1, сжимается только часть пространства переполнения, то есть фактическая ширина усадки = ширина пространства переполнения * сумма flex-shrink * вес
Свойство flex-basis устанавливает, сколько места элемент занимает на главной оси.
flex-basis может быть установлен на определенное значение размера css или может быть установлен так, чтобы он занимал процент от родительского элемента, значение по умолчанию — auto
На значение flex-basis влияют min-width и max-width.
Свойство flex является сокращением для свойств flex-grow, flex-shrink и flex-basis.
flex:1 => flex:1 1 0%
Атрибут порядка определяет порядок расположения упругих элементов, чем меньше число, тем выше передний
Макет сетки
Создайте контейнер Grid
отображение: сетка | встроенная сетка
Атрибут для указания контейнера как блочного/встроенного элемента макета сетки.
строки шаблона сетки и столбцы шаблона сетки
Этот элемент используется для определения строк и столбцов макета сетки.
display:flex;
width:300px;
height:300px;
grid-template-rows:100px 100px 100px;
grid-template-columns:100px 100px 100px;
//将会创建一个九宫格布局
Кроме абсолютных единиц можно использовать и проценты.
авто
Атрибут может получить ключевое слово auto, указывающее, что длина будет определяться браузером (автоматическая адаптация).
width:500px;height:300px;display:grid;grid-template-columns:100px auto 100px;//此操作将会创建一个三列的，两侧为100px中间为200px的栅格布局
повторить()
Функция repeat() может определять значения, которые упрощают повторение
grid-template-columns:100px 100px 100px 100px;//简化后grid-template-columns:repeat(4,100px);
автозаполнение
Иногда размер ячейки фиксирован, а размер контейнера — нет. Если вы хотите, чтобы каждая строка/столбец содержала как можно больше элементов, вы можете использовать для заполнения ключевое слово auto-fill. будет автоматически заполняться до тех пор, пока контейнер не сможет содержать больше столбцов
grid-template-columns:repeat(auto-fill,100px);
фр
Ключевое слово fr используется для обозначения пропорциональных отношений ячеек. Если два столбца имеют ширину 1fr и 2fr, последний будет в два раза шире первого.
grid-template-columns:1fr 2fr 3fr;//将创建一个列宽度比例为1:2:3的栅格布局
мин Макс()
Функция minmax() генерирует диапазон длин, указывая, что длина находится в пределах этого диапазона.
grid-template-columns:minmax(100px,200px) minmax(100px,200px);
имя линии сетки
В атрибутах grid-template-columns и grid-template-rows можно использовать квадратные скобки для указания имени каждой линии сетки для дальнейшего использования.
grid-template-columns:[c1] 100px [c2] 100px [c3] auto [c4];
Каждая линия сетки может иметь несколько имен
grid-template-columns:[c1-start] 100px [c1-end c2-start] 100px [c2-end];
Функция repeat() также может называть линии сетки
grid-template-columns:repeat(3,[c-start] 1fr [c-end]);grid-column:c-start 1 / c-end 3;
сетка-шаблон
Атрибут grid-template является сокращенным атрибутом для атрибутов grid-template-rows и grid-template-columns.
grid-template:repeat(3,100px) / repeat(2,10px);
//等价于
grid-template-rows:repeat(3,100px);
grid-template-columns:repeat(2,100px);
зазор между строками, зазоры в столбцах и зазоры
Свойства row-gap и column-gap используются для установки интервала между строками и столбцами.
При использовании сетки с fr в качестве единицы размер сетки будет автоматически корректироваться после установки интервала, чтобы дочерние элементы не перекрывали родительский элемент.
При использовании абсолютных единиц, таких как px, если общая ширина дочерних элементов превышает ширину родительского контейнера после установки интервала, дочерние элементы будут частично переполнять родительский контейнер.
Атрибут gap — это сокращенный атрибут для атрибутов row-gap и column-gap.
gap: <row-gap> <column-gap>;
Если в атрибуте gap отсутствует второе значение, второе значение по умолчанию равно первому значению.
сетка-столбец-начало и сетка-столбец-конец и сетка-строка-начало и сетка-строка-конец
Этот атрибут используется для определения четырех границ дочерних элементов , линии сетки которых расположены на них соответственно.
grid-column-startАтрибут: вертикальная линия сетки, где находится левая границаgrid-column-endАтрибут: вертикальная линия сетки, где находится правая границаgrid-row-startАтрибут: горизонтальная линия сетки, где расположена верхняя границаgrid-row-endАтрибут: горизонтальная линия сетки, где расположена нижняя граница
Сокращенный атрибут grid-column и grid-row
Атрибуты grid-column и grid-row являются сокращенными атрибутами для перечисленных выше атрибутов.
grid-column-start:2;grid-column-end:3;//等价于grid-column:2 / 3;
Ключевое слово span для сокращенных свойств
В сокращенных атрибутах grid-column и grid-row можно использовать ключевое слово span, чтобы указать, сколько сеток охватывать.
grid-column-start:1;grid-column-end:4;//等价于grid-column:1 / 4;//等价于grid-column:span 4;//等价于grid-column-end:span 4;
В приведенном выше примере первый параметр атрибута игнорируется, а второй параметр напрямую определяется как диапазон 4, что означает, что он будет охватывать первую строку по умолчанию.
Когда указан только атрибут grid-*-end и для охвата используется ключевое слово span, ситуация аналогична ключевому слову grid-*.
grid-column-start:2;grid-column-end:4;//等价于grid-column:2 / 4;//等价于grid-column:2 / span ;
В данном примере четко указан порядковый номер первой строки, а пересечение выполняется по правилам
Если оставшихся сеток в текущей строке недостаточно, браузер автоматически переместит сетку на следующую строку.
сетка-область
Этот атрибут указывает, в какую область помещается элемент, и может использоваться имя, определенное атрибутом grid-template-areas.
.container{
display:grid; grid-template-areas:'a b c' 'd e f';}.item{
grid-area:e;}
Может использоваться в качестве комбинированного сокращения для атрибута grid-column-start grid-column-end grid-row-start grid-row-end, непосредственно указывающего местоположение элемента.
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
сетки-шаблоны-области
Свойство grid-template-areas используется для определения областей
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a b c'
'd e f'
'g h i';
Приведенный выше код сначала делит 9 ячеек, а затем называет их aдевятью iобластями, соответствующими девяти ячейкам.
Способ объединения нескольких ячеек в одну область следующий.
grid-template-areas: 'a a a'
'b b b'
'c c c';
Приведенный выше код делит 9 ячеек на a, b, cтри области.
Если какие-то области не нужно использовать, они обозначаются .«точками» ( ).
grid-template-areas: 'a . c'
'd . f'
'g . i';
В приведенном выше коде средний столбец представляет собой точку, указывающую, что ячейка не используется или не принадлежит ни к какой области.
Обратите внимание, что наименование регионов влияет на линии сетки. Начальная линия сетки каждой области будет автоматически называться
区域名-start, а конечная линия сетки будет автоматически называться区域名-end.Например, если область названа
header, горизонтальные и вертикальные линии сетки в начальной позиции называютсяheader-start, а горизонтальные и вертикальные линии сетки в конечной позиции называютсяheader-end.
выравнивание содержимого и выравнивание содержимого и размещение содержимого
Атрибут justify-content используется для установки горизонтального положения всего содержимого в контейнере, а атрибут align-content используется для установки вертикального положения всего содержимого в контейнере.
justify-content: start | end | center | stretch | space-around | space-evenly | space-between;align-content: start | end | center | stretch | space-around | space-evenly | space-between;
Свойство place-content является сокращением для свойств justify-content и align-content.
place-content:<align-content> <justify-content>;
Если второе значение опущено, браузер предполагает, что второе значение равно первому.
выравнивание элементов и выравнивание элементов и размещение элементов
Атрибут justify-items используется для установки горизонтального положения содержимого ячейки , а атрибут align-items используется для установки вертикального положения содержимого ячейки .
justify-items: start | end | center | stretch;align-items: start | end | center | stretch;
Свойство place-items является сокращением для свойств justify-items и align-items.
place-items:<align-items> <justify-items>;
Если второе значение опущено, браузер предполагает, что второе значение равно первому.
сетка-автопоток
Свойство grid-auto-flow управляет тем, как работает алгоритм автоматической компоновки, точно определяя, как располагаются элементы, которые должны быть автоматически размещены в сетке. По умолчанию используется порядок «сначала строка, затем столбец», то есть сначала заполняется первая строка, а затем начинается вторая строка. Значение по умолчанию — строка
grid-auto-flow: row | column | row dense | column dense;
- строка по умолчанию
- вертикальное расположение колонн
- заполнение плотной плотности
Когда некоторые элементы накладываются и создают промежутки, используйте плотность, чтобы заполнить промежутки элементами, соответствующими размеру, и расположить их в соответствии с максимальной плотностью.
рем-макет
максимальная ширина и максимальная ширина устройства
max-width — ширина видимой области браузера, а max-device-width — ширина дисплея устройства
Ширина мобильного браузера обычно равна ширине устройства, поэтому max-device-width можно использовать для мобильной адаптации.
При разработке адаптивных страниц рекомендуется использовать max-device-width
На устройствах разного размера используйте media response для управления размером шрифта корневого узла страницы, чтобы добиться rem-макета.
рем фактически разрабатывает схему адаптации
- В соответствии с соотношением дизайна к ширине устройства динамически рассчитывать и устанавливать размер шрифта html и тегов; (медиа-запрос)
- В CSS ширина, высота, взаимное расположение и другие значения элементов проектного чертежа преобразуются в значения в единицах рем по тому же соотношению.
Различные размеры экрана обычно устанавливают разные размеры шрифта
- iPhone 4 5 640px
- iPhone 6 7 8 750px
- Стандартный Android 320px 360px 375px 384px 400px 414px 424px 480px 500px 540px 720px 750px
Динамически устанавливать размер шрифта HTML-тегов и значение элементов страницы.
-
Предположим, что черновик дизайна составляет 750 пикселей.
-
Предположим, что весь экран разделен на 15 равных частей (стандарт деления не обязательно может быть на 20 или 10 равных частей)
-
В каждой копии используется размер шрифта html, то есть 750/15=50px, под устройство 320px размер шрифта 320/15=21.33px
значение элемента страницы
- Значение rem элемента страницы = значение элемента страницы в пикселях при 750 пикселях / размер текста в html
образец кода
В этом примере кода страница разделена на 15 равных частей.
@media all and (max-width:320px){
html{
font-size: 21.33px;
}
}
@media all and (min-width:321px) and (max-width:360px){
html{
font-size: 24px;
}
}
@media all and (min-width:361px) and (max-width:375px){
html{
font-size: 25px;
}
}
@media all and (min-width:376px) and (max-width:384px){
html{
font-size: 25.6px;
}
}
@media all and (min-width:385px) and (max-width:400px){
html{
font-size: 26.66px;
}
}
@media all and (min-width:401px) and (max-width:414px){
html{
font-size: 27.6px;
}
}
@media all and (min-width:415px) and (max-width:424px){
html{
font-size: 28.27px;
}
}
@media all and (min-width:425px) and (max-width:480px){
html{
font-size: 32px;
}
}
@media all and (min-width:481px) and (max-width:500px){
html{
font-size: 33.33px;
}
}
@media all and (min-width:501px) and (max-width:540px){
html{
font-size: 36px;
}
}
@media all and (min-width:541px) and (max-width:640px){
html{
font-size: 42.67px;
}
}
@media all and (min-width:641px) and (max-width:720px){
html{
font-size: 48px;
}
}
@media all and (min-width:721px){
html{
font-size: 50px;
}
}
использование технологии схемы адаптации rem
Вариант первый
- меньше
- медиа-запрос
- бэр
Вариант 2 (рекомендуемый, более простой)
- гибкий.js
- бэр
гибкий.js
flexible.js автоматически делит экран на 10 равных частей