В нашем процессе разработки интерфейса напишитеcss(включатьsass, less, stylusТакой препроцессор) является важной задачей для восстановления стиля черновика дизайна. Среди них часть, связанная с макетом страницы, находится в центре внимания и сложности при написании кода стиля. В этой статье мы постараемся максимально обобщить общие из них. Некоторые схемы реализации макета страницы (并不是全部，布局实现方法太多了), я надеюсь, что это поможет вам.
Прежде чем мы перейдем к делу, нужно отметить одну вещь:cssНеизбежная проблема, возникающая в макете, — это совместимость с браузером. Следующие решения столкнутся с аналогичнымиtransform, flexПроблемы совместимости и из-заgridПроблемы совместимости макетов, пока не затрагиваемыеgridМакет содержания, в разных сценариях можно выбрать подходящую схему реализации макета.
1. Расположение по центру
1.1 Расположение по центру по горизонтали
Схема эффекта выглядит следующим образом:
Вариант первый.inline-block + text-align
анализировать:displayУстановить какinline-blockЭлемент имеет свойства текстового элемента, а его родительский элемент можно задать, установив свойство выравнивания текстаtext-alignконтролировать его встроенное выравнивание,text-align: centerгоризонтальное выравнивание
Уведомление:text-alignАтрибут наследуется, что приведет к тому, что текст внутри собственного элемента будет отображаться по центру, который нужно установить сам по себеtext-alignпокрытие
<style>
.wrap {
width: 100%;
height: 200px;
background-color: aqua;
text-align: center;
}
.content {
width: 200px;
height: 200px;
background-color: blueviolet;
display: inline-block;
}
</style>
<body>
<div class="wrap">
<div class="content"></div>
</div>
</body>
Вариант 2. Позиционирование +transform
Анализ: после того, как родительский элемент открывает позиционирование (относительное, абсолютное, фиксированное все может быть), дочерний элемент устанавливает абсолютное позиционированиеabsoluteназад,leftУстановить как50%, повторное использованиеtransform: translateX(-50%)Переместите дочерний элемент в противоположном направлении на его ширину50%для завершения горизонтального центрирования.
Примечание. Нахождение родительского элемента вне потока документов не влияет на эффект горизонтального центрирования дочернего элемента, ноtransformдаcss3свойства, есть проблемы с совместимостью браузера
<style>
.wrap {
position: relative;
width: 100%;
height: 200px;
background-color: aqua;
}
.content {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 200px;
background-color: blueviolet;
}
</style>
<body>
<div class="wrap">
<div class="content"></div>
</div>
</body>
третье решение.display: block + margin: 0 auto
Анализ: этот метод должен только установить дочерние элементы для достижения горизонтального центрирования.Если для поля установлено значение auto, это означает, что браузер автоматически выделит его для достижения эффекта равных полей.
Примечание. Этот дочерний элемент устанавливаетdisplayдляblockилиtableВсе возможно, если дочерний элемент находится вне потока документа (плавающий, позиционированный), это приведет к тому, что значение атрибута поля будет недействительным.
<style>
.wrap {
width: 100%;
height: 200px;
background-color: aqua;
}
.content {
width: 200px;
height: 200px;
background-color: blueviolet;
display: table;
margin: 0 auto;
}
</style>
<body>
<div class="wrap">
<div class="content"></div>
</div>
</body>
1.2 Расположение по центру по вертикали
Схема эффекта выглядит следующим образом:
Вариант 1. Позиционирование +transform
Эта схема основана на том же принципе, что и предыдущая схема 2 горизонтально-центрированной раскладки, поэтому не буду вдаваться в подробности.
<style>
.wrap {
position: relative;
width: 200px;
height: 600px;
background-color: aqua;
}
.content {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 200px;
height: 200px;
background-color: blueviolet;
}
</style>
<body>
<div class="wrap">
<div class="content"></div>
</div>
</body>
Вариант 2.display: table-cell + vertical-align
Анализ: настройкиdisplay: table-cellэлементы имеютtdПоведение элемента, его дочерние элементы располагаются как текстовый элемент и могут использоваться в родительском элементеvertical-align: middle;Реализует вертикальное центрирование дочерних элементов.
Уведомление:vertical-alignАтрибуты наследуются, в результате чего текст внутри родительского элемента также центрируется по вертикали.
<style>
.wrap {
display: table-cell;
vertical-align: middle;
width: 200px;
height: 600px;
background-color: aqua;
}
.content {
width: 200px;
height: 200px;
background-color: blueviolet;
}
</style>
<body>
<div class="wrap">
<div class="content"></div>
</div>
</body>
1.3 Горизонтальное и вертикальное центрирование
Схема эффекта выглядит следующим образом:
Вариант 1. Позиционирование +transform
<style>
.wrap {
position: relative;
width: 1200px;
height: 800px;
background-color: aqua;
}
.content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background-color: blueviolet;
}
</style>
<body>
<div class="wrap">
<div class="content"></div>
</div>
</body>
Вариант 2. Совместить план горизонтальной планировки 3 и план вертикальной планировки 2
<style>
.wrap {
display: table-cell;
vertical-align: middle;
width: 1200px;
height: 800px;
background-color: aqua;
}
.content {
margin: 0 auto;
width: 200px;
height: 200px;
background-color: blueviolet;
}
</style>
<body>
<div class="wrap">
<div class="content"></div>
</div>
</body>
1.4 Использованиеflexрасположение по центру
Анализ: использованиеflex, центрирование по горизонтали и вертикали становится очень простым по умолчанию,align-items: centerЦентрировать по вертикали (поперечное расположение),justify-content: centerГоризонтальное центрирование (расположение шпинделя)
Примечание. Необходимо учитывать проблемы совместимости браузеров.
<style>
.wrap {
display: flex;
align-items: center;
justify-content: center;
width: 1200px;
height: 800px;
background-color: aqua;
}
.content {
width: 200px;
height: 200px;
background-color: blueviolet;
}
</style>
<body>
<div class="wrap">
<div class="content"></div>
</div>
</body>
2. Макет N-столбцов
2.1 Двухколоночный макет
Макет с двумя столбцами здесь означает, что один столбец является элементом фиксированной ширины, а другой столбец имеет адаптивную ширину. Например, мы реализуем макет с фиксированной шириной столбца и адаптивным правым столбцом.
Схема эффекта выглядит следующим образом:
Вариант 1. Плавающий левый элемент, фиксированная ширина, установка правого элементаmargin-left
Анализ: один из самых простых методов, левый элемент устанавливается плавающим, имеет фиксированную ширину, а правый элементmargin-leftУстановите его на ширину левого элемента, чтобы добиться эффекта.
Примечание. Мы используем float для левого элемента, но не для правого.
<style>
.l, .r {
height: 600px;
}
.l {
width: 400px;
background-color: aqua;
float: left;
}
.r {
background-color: blueviolet;
margin-left: 400px;
}
</style>
<body>
<div class="l">定宽</div>
<div class="r">自适应</div>
</body>
Вариант 2. Левый элемент плавающий, ширина фиксированная, правый элемент заданныйoverflow:hidden
Анализ: правильный элемент из-за настройкиoverflow:hiddenвключиBFC, изолированы от внешнего мира, поэтому эффект может быть достигнут
Уведомление:overflow:hiddenПараметр также делает содержимое правого элемента более скрытым. Если здесь не указаноoverflow:hidden, ширина элемента справа равна 100%, а часть его закрыта плавающим элементом слева, что не является желаемым результатом, хотя, похоже, это не имеет никакого значения.
<style>
.l, .r {
height: 600px;
}
.l {
width: 400px;
background-color: aqua;
float: left;
}
.r {
background-color: blueviolet;
overflow: hidden;
}
</style>
<body>
<div class="l">定宽</div>
<div class="r">自适应</div>
</body>
Вариант 3. Используйте левый и правый элементы с однимdisplay:tableОбтекание элемента, левый и правый элементы установлены наdisplay: table-cell
Анализ: это в основном основано на элементах таблицы.Если ширина не установлена, ширина будет автоматически выделена для реализации макета.
Примечание. После настройки в качестве таблицы на некоторые браузеры может повлиять уникальное поведение самой таблицы, например границы таблицы и т. д.
<style>
.w {
display: table;
table-layout: fixed;
width: 100%;
}
.l, .r {
display: table-cell;
height: 600px;
}
.l {
width: 400px;
background-color: aqua;
}
.r {
background-color: blueviolet;
}
</style>
<body>
<div class="w">
<div class="l">定宽</div>
<div class="r">自适应</div>
</div>
</body>
Вариант четвертый.flexмакет
Анализ: внедрение родительского контейнераflexМакет, после левого элемента фиксируется правый элемент, потому что он только один, поэтомуflexсвойство установлено в положительное значение, отличное от 0 (то есть установкаflex-grow), займет оставшееся место.
Примечание: все же обратите внимание на проблемы совместимости.
<style>
.p {
display: flex;
height: 600px;
}
.l {
background-color: aqua;
width: 400px;
}
.r {
flex: 1;
background-color: blueviolet;
}
</style>
<body>
<div class="p">
<div class="l">定宽</div>
<div class="r">自适应</div>
</div>
</body>
2.2 Трехколоночный макет
Макет из трех столбцов здесь в основном вводится в три ситуации. Первый - это обычная трехфунтовая макет, а остальные два являются более известными планировкой Святой Грааля и с двойным летанием (两者都是实现一个两侧宽度固定，中间宽度自适应的三列布局，区别在于双飞翼布局比起圣杯布局，中间元素会多一个子元素，而左右元素需要定位relative)
2.2.1 Обычная трехколоночная раскладка
Здесь мы добились расположения двух столбцов слева и посередине, а справа — адаптивного макета, который на самом деле похож на предыдущий макет с двумя столбцами.
Схема эффекта выглядит следующим образом:
Вариант 1. Фиксированная ширина +overflow:hidden
Анализ: эта схема такая же, как схема макета с двумя столбцами 2.
<style>
.l, .c, .r {
height: 600px;
}
.l {
width: 400px;
background-color: aqua;
float: left;
}
.c {
width: 400px;
background-color: blueviolet;
float: left;
}
.r {
background-color: brown;
overflow: hidden;
}
</style>
<body>
<div class="l">定宽</div>
<div class="c">定宽</div>
<div class="r">自适应</div>
</body>
Вариант 2.flexмакет
Анализ: здесь принцип компоновки и двухколоночная компоновкаflexСхема такая же.
<style>
.w {
display: flex;
height: 600px;
}
.l {
width: 400px;
background-color: aqua;
}
.c {
width: 400px;
background-color: blueviolet;
}
.r {
flex: 1;
background-color: brown;
}
</style>
<body>
<div class="w">
<div class="l">定宽</div>
<div class="c">定宽</div>
<div class="r">自适应</div>
</div>
</body>
2.2.2 Схема Святого Грааля
Трехколоночный макет с фиксированной шириной с обеих сторон и адаптивной шириной посередине (中间元素不需要嵌套子元素)
Схема эффекта выглядит следующим образом:
Вариант 1. Плавающие левая и правая стороны и использование среднего элементаmargin
Анализ: этот метод состоит в том, чтобы плавать слева и справа, задавать ширину и использовать средний элемент.marginПустое расположение элементов слева и справа, реализация относительно проста.
Примечание. Таким образом, вам нужно написатьhtmlПри структурировании пишите правый элемент перед средним элементом, потому что, если правый элемент находится за средним элементом, правый элемент будет тонуть, потому что положение плавающего элемента не может быть выше (или на уровне), чем предыдущий неплавающий элемент. элемент. . Однако промежуточные элементы, как правило, составляют основную часть страницы и размещаются в конце сравнения, что не способствуетSEO.
<style>
.l, .c, .r {
height: 600px;
}
.l {
width: 400px;
background-color: aqua;
float: left;
}
.c {
background-color: blueviolet;
margin-left: 400px;
margin-right: 400px;
}
.r {
width: 400px;
background-color: brown;
float: right;
}
</style>
<body>
<div class="l">定宽</div>
<div class="r">定宽</div>
<div class="c">自适应</div>
</body>
Вариант 2. Использование родительского контейнераmargin, левый, средний и правый элементы являются плавающими, используя позиционирование иmarginпереместиться в правильное место
Анализ: этот метод помещает средний элемент c на передний план, что выгодно дляSEO.
Примечание. Подробности реализации приведены в комментариях к приведенному ниже коду.
<style>
.w {
/* margin-left对应左边元素l的宽度，margin-right对应右边元素r的宽度 */
margin-left: 400px;
margin-right: 400px;
}
.l, .c, .r {
height: 600px;
float: left;
}
.l {
width: 400px;
background-color: aqua;
position: relative;
/* 为了让l元素从当前行移动到第一行同一位置*/
margin-left: -100%;
/* 移动到中间元素左侧正确位置 */
left: -400px;
}
.c {
width: 100%;
background-color: blueviolet;
}
.r {
width: 400px;
background-color: brown;
position: relative;
/* 为了让l元素从当前行移动到上一行*/
margin-left: -400px;
right: -400px;
}
</style>
<body>
<div class="w">
<div class="c">自适应</div>
<div class="l">定宽</div>
<div class="r">定宽</div>
</div>
</body>
2.2.3. Двухстворчатая компоновка
Трехколоночный макет с фиксированной шириной с обеих сторон и адаптивной шириной посередине (中间元素内部增加子元素用于放置内容)
Схема эффекта выглядит следующим образом:
Вариант 1. Настройки подэлемента среднего элементаmargin, левый, средний и правый элементы устанавливаются плавающими, а левый и правый элементы проходят черезmarginпереместиться в правильное место
Анализ: этот метод добавляет подэлементы в качестве областей содержимого для промежуточных элементов и устанавливает их через подэлементы.marginЗаканчивать.
Примечание. По сравнению с макетом Святого Грааля есть сходства и различия, а достигнутые результаты такие же.
<style>
.l, .c, .r {
height: 600px;
float: left;
}
.l {
width: 400px;
background-color: aqua;
/* 为了让l元素从当前行移动到第一行同一位置*/
margin-left: -100%;
}
.c {
width: 100%;
background-color: blue;
}
.i {
height: 600px;
background-color: blueviolet;
margin-left: 400px;
margin-right: 400px;
}
.r {
width: 400px;
background-color: brown;
/* 为了让r元素移动到第一行*/
margin-left: -400px;
}
</style>
<body>
<div class="c">
<div class="i">自适应</div>
</div>
<div class="l">定宽</div>
<div class="r">定宽</div>
</body>
2.2.4. flexРеализация макета (адаптивная посередине, одинаковая ширина слева и справа)
анализировать:flexРеализация очень простая, можно сослаться на обычную трехколоночную версткуflexвыполнить.
Примечание: по-прежнему обращайте внимание на проблемы совместимости браузеров.
<style>
.w {
display: flex;
height: 600px;
}
.l {
width: 400px;
background-color: aqua;
}
.c {
flex: 1;
background-color: blueviolet;
}
.r {
width: 400px;
background-color: brown;
}
</style>
<body>
<div class="w">
<div class="l">定宽</div>
<div class="c">自适应</div>
<div class="r">定宽</div>
</div>
</body>
2.3 Многоколоночный макет с равным разделением
Так называемый многоколоночный макет с равным разделением означает, что несколько столбцов адаптивно делятся на равные по ширине в контейнере.В качестве примера мы возьмем пятиколоночный макет с равным разделением.
Схема эффекта выглядит следующим образом:
Вариант 1. Плавающий + разделить процент
Анализ: это решение состоит в том, чтобы сделать каждый столбец плавающим, а затем разделить ширину поровну в соответствии с процентным соотношением, что легко реализовать.
<style>
.col {
float: left;
width: 20%;
height: 300px;
}
.col1 {
background-color: blue;
}
.col2 {
background-color: blueviolet;
}
.col3 {
background-color: aqua;
}
.col4 {
background-color: beige;
}
.col5 {
background-color: salmon;
}
</style>
<body>
<div class="w">
<div class="col col1"></div>
<div class="col col2"></div>
<div class="col col3"></div>
<div class="col col4"></div>
<div class="col col5"></div>
</div>
</body>
Вариант 2. Использованиеdisplay: tableмакет
Анализ: обозначение родительского контейнераdisplay: table, который устанавливает поведение макетаtable-layout: fixed, указав, что каждая таблица имеет одинаковую ширину.
Уведомление:table-layout: fixedЕго необходимо установить.По умолчанию ширина столбца задается содержимым ячейки.После настройки ширина столбца задается шириной таблицы и шириной столбца.
<style>
.w {
display: table;
/* 列宽由表格宽度和列宽度设定 */
table-layout: fixed;
width: 100%;
}
.col {
display: table-cell;
height: 300px;
}
.col1 {
background-color: blue;
}
.col2 {
background-color: blueviolet;
}
.col3 {
background-color: aqua;
}
.col4 {
background-color: beige;
}
.col5 {
background-color: salmon;
}
</style>
<body>
<div class="w">
<div class="col col1"></div>
<div class="col col2"></div>
<div class="col col3"></div>
<div class="col col4"></div>
<div class="col col5"></div>
</div>
</body>
Вариант 3. Использованиеcolumnмакет
Анализ: использованиеcolumnМакет, указанная область содержимого должна быть разделена на 5 столбцов.
Примечание. Проблемы совместимости браузера.
<style>
.w {
/* 指定列数 */
column-count: 5;
/* 指定列与列之间的间隙，默认1em */
column-gap: 0;
}
.col {
height: 300px;
}
.col1 {
background-color: blue;
}
.col2 {
background-color: blueviolet;
}
.col3 {
background-color: aqua;
}
.col4 {
background-color: beige;
}
.col5 {
background-color: salmon;
}
</style>
<body>
<div class="w">
<div class="col col1"></div>
<div class="col col2"></div>
<div class="col col3"></div>
<div class="col col4"></div>
<div class="col col5"></div>
</div>
</body>
Вариант 4. Использованиеflexмакет
Анализ: использованиеflexМакет очень простой, вы можете указать, что каждый столбец занимает одинаковое пространство.
<style>
.w {
display: flex;
}
.col {
height: 300px;
flex: 1;
}
.col1 {
background-color: blue;
}
.col2 {
background-color: blueviolet;
}
.col3 {
background-color: aqua;
}
.col4 {
background-color: beige;
}
.col5 {
background-color: salmon;
}
</style>
<body>
<div class="w">
<div class="col col1"></div>
<div class="col col2"></div>
<div class="col col3"></div>
<div class="col col4"></div>
<div class="col col5"></div>
</div>
</body>
</html>
2.4 Многоколоночный макет равной высоты
Так называемый многоколоночный макет равной высоты означает, что содержимое нескольких типов может быть разным, но высота каждого столбца гарантированно будет одинаковой.这个高度应该由内容最多的那一列决定.
Схема эффекта выглядит следующим образом:
Вариант 1. Используйтеdisplay: tableмакет
Анализ: настройки родительского элементаdisplay: table, настройки дочернего элементаdisplay: table-cell, чтобы макет располагался в соответствии с поведением таблицы, а ячейки таблицы по умолчанию имели одинаковую высоту.
<style>
.w {
display: table;
}
.col {
display: table-cell;
width: 20%;
}
.col1 {
background-color: blue;
}
.col2 {
background-color: blueviolet;
}
.col3 {
background-color: aqua;
}
.col4 {
background-color: beige;
}
.col5 {
background-color: salmon;
}
</style>
<body>
<div class="w">
<div class="col col1">啊啊啊啊啊啊啊啊啊啊啊啊</div>
<div class="col col2">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
<div class="col col3">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
<div class="col col4"></div>
<div class="col col5">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
</div>
</body>
Вариант 2. Использованиеflexмакет
Анализ: По умолчаниюdisplay: flexЭлементыalign-itemsСтоимость свойстваstretch, если элемент не имеет высоты или для него установлено значение auto, он будет занимать всю высоту контейнера.
<style>
.w {
display: flex;
}
.col {
flex: 1;
}
.col1 {
background-color: blue;
}
.col2 {
background-color: blueviolet;
}
.col3 {
background-color: aqua;
}
.col4 {
background-color: beige;
}
.col5 {
background-color: salmon;
}
</style>
<body>
<div class="w">
<div class="col col1">啊啊啊啊啊啊啊啊啊啊啊啊</div>
<div class="col col2">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
<div class="col col3">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
<div class="col col4"></div>
<div class="col col5">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
</div>
</body>
3. Полноэкранный макет
Так называемый полноэкранный макет реализует классическую компоновку заголовка, области содержимого и трех нижних областей, занимающих весь экран.Этот макет очень распространен.
Эффект следующий:
Анализ: решение, принятое здесь, состоит в том, чтобы использовать фиксированное позиционирование в нижней части заголовка и использовать метод макета с двумя столбцами, упомянутый ранее, в середине.
Примечание: можно использовать нижнюю часть головы.header, footerМетки, структура области содержимого и макеты разнообразны.
<style>
html, body {
margin: 0;
overflow: hidden;
}
.header {
position: fixed;
left: 0;
top: 0;
right: 0;
height: 100px;
background-color: salmon;
}
.w {
position: fixed;
left: 0;
right: 0;
top: 100px;
bottom: 100px;
overflow: auto;
background-color: palevioletred;
}
.w .l {
width: 400px;
/* height: 100%; */
position: fixed;
left: 0;
top: 100px;
bottom: 100px;
background-color: greenyellow;
}
.w .r {
position: fixed;
left: 400px;
right: 0;
top: 100px;
bottom: 100px;
background-color: blueviolet;
}
.footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 100px;
background-color: goldenrod;
}
</style>
<body>
<div class="header"></div>
<div class="w">
<div class="l"></div>
<div class="r"></div>
</div>
<div class="footer"></div>
</body>
В этой статье обобщается реализация некоторых распространенных макетов,cssСхем реализации макета много, и надо накопить еще и подобрать подходящую схему.
В конце концов, я надеюсь, что со временем совместимость перестанет быть препятствием для внедрения наших технологий, и пусть мир будет становиться все лучше и лучше.