Как найти минимальная ширина

Время на прочтение
10 мин

Количество просмотров 94K

Перевод «Min and Max Width/Height in CSS» Ахмада Шадида.

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

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

Свойства ширины

Начать обсуждение хотелось бы со свойств, связанных с шириной. У нас есть min-width и max-width, и каждое из них крайне важно и полезно в определённых ситуациях.

Минимальная ширина (min-width)

Своство min-width предназначено для предотвращения уменьшения ширины элемента ниже заданного значения. Значением по умолчанию является auto, которое может доходить до 0.

Чтобы продемонстрировать его, давайте рассмотрим базовый пример:

Есть кнопка с текстом, размер которого может меняться от одного до нескольких слов. Чтобы быть уверенным, что эта кнопка будет иметь минимально допустимую ширину, даже если внутри будет только одно слово, нужно использовать min-width. Минимальную ширину задали равной 100px, поэтому даже если у кнопки будет очень короткое содержимое, как, например, только слово «Done» или только иконка, она всё равно будет достаточно большой, чтобы оставаться заметной. Это особенно важно, когда вы работаете с сайтами, переведёнными на разные языки

Рассмотрим пример с арабским языком в Twitter:

В примере выше кнопка содержит слово “تم”, что на арабском значит «Готово». Из-за короткого содержимого ширина и самой кнопки стала слишком мала, поэтому я обозначил минимум, задав ей свойство min-width, что можно увидеть на изображении справа (в секции «After»).

Минимальная ширина и Padding

Хотя свойство min-width и допускает увеличение ширины кнопки при увеличении размера её содержимого, по бокам всё же следует задавать padding, чтобы гарантировать внутренний отступ от её границ. Разница приведена на рисунке ниже

Максимальная ширина (max-width)

Свойство max-width предназначено для предотвращения увеличения ширины элемента выше заданного значения. Значение по умолчанию – none.

Распространённый и простой пример использования max-width заключается в его применении к изображениям. Рассмотрим пример ниже:

Если к изображению применить свойство max-width: 100% оно останется в границах родительского элемента, даже при том, что его изначальный размер больше. Если же изображение изначально меньше родителя, данное свойство никак на него не повлияет.

Использование min-width и max-width

Если к элементу применяются оба свойства, какое из них переопределит значение другого? Другими словами, у какого свойства приоритет выше?

Если значение min-width больше, чем max-width, оно будет принято за ширину элемента. Рассмотрим следующий пример:

HTML

<div class="wrapper">
  <div class="sub"></div>
</div>

CSS

.sub {
  width: 100px;
  min-width: 50%;
  max-width: 100%;
}

Исходное значение width равно 100px и в дополнение к этому заданы значения свойств min-width и max-width. В результате ширина данного элемента не будет превышать 50% ширины родительского блока

Свойства высоты

В дополнение к свойствам минимальной и максимальной ширины, есть такие же свойства для высоты

Минимальная высота (min-height)

Свойство min-height предназначено для предотвращения уменьшения высоты элемента ниже заданного значения. Значением по умолчанию является auto, которое может доходить до 0.

Чтобы продемонстрировать его, давайте рассмотрим простой пример.

У нас есть секция с текстовым содержимым. Необходимо, чтобы она смотрелась красиво как с большим, так и с малым количеством текста

CSS

.sub {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  min-height: 100px;
  color: #fff;
  background: #3c78dB;
}

Минимальная высота задана 100px, а содержимое центрировано с помощью flexbox по горизонтали и вертикали. Что произойдёт, если содержимого станет больше? Например, будет целый абзац

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

Максимальная высота (max-height)

Свойство max-height предназначено для предотвращения увеличения высоты элемента больше заданного значения. Значением по умолчанию является none.

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

Примеры использования свойств

Рассмотрим некоторые распространённые и редкие сценарии использования свойств min-width, min-height, max-width, и max-height

Список тегов

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

Обладая такой гибкостью, тег будет хорошо выглядеть независимо от того, насколько коротким является его содержимое. Но что случится, если автор задал очень большое имя тега, а используемая им CMS (content management system) не имеет ограничений по количеству символов в теге? В этой ситуации также можно использовать max-width

CSS

.c-tag {
  display: inline-block;
  min-width: 100px;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /*Other styles*/
}

С помощью max-width можно ограничить максимальную ширину определённым значением. Однако, недостаточно применения только этого свойства. Содержимое, превышающее максимальную ширину, должно быть усечено.

Кнопки

Существуют разные сценарии использования свойств минимума и максимума для кнопок, поскольку и самих вариантов компонентов кнопок также немало. Рассмотрим следующий макет:

Обратите внимание, что ширина кнопки «Get» слишком мала. Если по какой-то причине у кнопки еще и не будет текста (а только иконка), всё может стать еще хуже. В этом случае установка минимальной ширины очень важна

Обнуление минимальной ширины для Flexbox

Значение по умолчанию у свойства min-width равняется auto, что вычисляется как ноль. Когда элемент является flex-элементом, значение min-width не становится нулём. Минимальный размер flex-элемента равняется размеру его содержимого.

Согласно CSSWG:
По умолчанию, flex-элементы не становятся меньше минимального размера, необходимого их содержимому (длина самого длинного слова или элемента с фиксированным размером). Чтобы изменить это, задайте свойство min-width или min-height.

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

Имя пользователя содержит очень длинное слово, которое вызывает переполнение и горизонтальную прокрутку. Хотя я и добавил представленный ниже CSS для усечения содержимого:

CSS

.c-person__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Поскольку заголовок является флекс-элементом, решение состоит в том, чтобы сбросить значение min-width и заставить его стать нулём

CSS

.c-person__name {
  /*Other styles*/
  min-width: 0;
}

Вот как это должно выглядеть после исправления:

Из описания в CSSWG следует, что установка свойства overflow в значение, отличное от visible, может привести к тому, что значение min-width будет вычислено как ноль, что также решает нашу проблему без необходимости явно задавать min-width: 0.

Обнуление минимальной высоты для Flexbox

Хотя это менее распространённая проблема по сравнению с min-width, она всё же может встретиться. Проблема связана с flex-элементами, которые не могут быть короче своего содержимого. В результате значение min-height устанавливается равным размеру контента.

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

Текст, окрашенный в красный цвет, должен быть обрезан границами контейнера. Но поскольку данный элемент является flex-элементом, его min-height равняется высоте содержимого. Чтобы предотвратить это, мы должны сбросить значение минимальной высоты. Давайте посмотрим на HTML и CSS код:

HTML

<div class="c-panel">
  <h2 class="c-panel__title"><!-- Title --></h2>
  <div class="c-panel__body">
    <div class="c-panel__content"><!-- Content --></div>
  </div>
</div>

CSS

.c-panel {
  display: flex;
  flex-direction: column;
  height: 180px;
}
 
.c-panel__body {
  min-height: 0;
}
 
.c-panel__content {
  overflow-y: scroll;
  height: 100%;
}

Добавление элементу min-height: 0 сбросит значение свойства и оно начнёт работать так, как ожидается
Демо

Одновременное использование min-width и max-width

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

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

Я добавил следующий CSS-код для изображений:

CSS

img {
  min-width: 35%;
  max-width: 70%;
}

Контейнер для страницы

Один из наиболее полезных сценариев применения свойства max-width – для обёртки (или контейнера) страницы. Задав странице максимальную ширину, мы можем быть уверены, что пользователям будет удобно просматривать и читать содержимое

Ниже приведён пример центрированной обёртки, имеющей padding слева и справа

CSS

.wrapper {
  max-width: 1170px;
  padding-left: 16px;
  padding-right: 16px;
  margin-left: auto;
  margin-right: auto;
}

Максимальная ширина и единица измерения «ch»

Единица измерения ch равняется ширине символа 0 (ноль), используемого в шрифте текущего элемента. Используя её в свойстве max-width, мы можем регулировать количество символов в строке. Согласно этой статье с сайта Smashing Magazine, рекомендованная длина строки от 45 до 75 символов.

В предыдущем примере с элементом-обёрткой, мы могли извлечь пользу от использования этого символа, поскольку это элемент статьи

CSS

.wrapper {
  max-width: 70ch;
  /* Other styles */
}

Анимирование элемента с неизвестной высотой

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

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

Когда нажимается кнопка меню, само меню должно плавно появляться сверху вниз. Сделать это без JavaScript невозможно, если только у элемента не задана фиксированная высота (а это делать не рекомендуется). Тем не менее, это возможно с помощью max-height. Идея заключается в добавлении элементу очень большой высоты, например, max-height: 20rem, которая, не будет достигнута, после чего мы можем задать шаги анимации от max-height: 0, до max-height: 20rem

CSS

.c-nav {
  max-height: 0;
  overflow: hidden;
  transition: 0.3s linear;
}
 
.c-nav.is-active {
  max-height: 22rem;
}

Нажмите на гамбургера, чтобы увидеть анимацию в действии

Минимальная высота для верхней секции (hero)

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

Рассмотрим следующий пример, где у нас есть секция «hero» с фиксировано заданной высотой. Вроде смотрится хорошо.

Однако, когда содержимое увеличивается, оно переполняет контейнер и выходит за рамки обёртки секции. Это плохо.

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

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

Если задавать не фиксированную высоту, а лишь ограничивать минимальную с помощью min-height, описанная выше проблема не произойдёт вовсе.

Модальное окно

Для компонента модального окна необходимо задавать и минимальную и максимальную ширину, следовательно, это будет работать на экранах любых размеров (от мобильных до десктопных). Это напоминает об интересной статье на CSS-Tricks, в которой рассказывается, что делать в этом случае.

1 способ

.c-modal__body {
  width: 600px;
  max-width: 100%;
}

2 способ

.c-modal__body {
  width: 100%;
  max-width: 600px;
}

Что касается меня, я предпочитаю второй способ, так как мне нужно только определить max-width: 600px. Модальное окно – это элемент div, поэтому у него уже ширина задана = 100% от родителя, правильно?

Рассмотрим приведённый ниже пример с модальным окном. Обратите внимание, как ширина становится равной 100% от ширины родителя, если в области просмотра недостаточно свободного места

Минимальная высота и липкий footer

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

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

Сначала я сделал элемент body flex-контейнером, после чего установил ему минимальную высоту 100% от области просмотра.

CSS

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
 
footer {
  margin-top: auto;
}

Рекомендую ознакомиться с этой статьёй о липких футерах.
Демо

Пропорциональные размеры элемента и max-width/height

Чтобы сделать пропорциональный контейнер, который масштабируется в зависимости от размера области просмотра, однажды был представлен хак с использованием padding. Сейчас мы можем имитировать похожее поведение, комбинируя единицы измерения области просмотра и максимальную ширину/высоту.

На основе материалов статьи Miriam Suzanne, я хочу объяснить, как это работает.

У нас есть изображение с размерами 644 x 1000 пикселей. Нам нужно сделать следующее:

• Соотношение сторон: height / width (высоту поделить на ширину)
• Ширина контейнера: может быть фиксированной или динамической (100%)
• Задайте height, равный 100% ширины области просмотра, умноженной на соотношение сторон
• Задайте max-height, равный ширине контейнера, умноженной на соотношение сторон
• Задайте max-width, равное ширине контейнера

CSS

img {
  --ratio: 664 / 1000;
  --container-width: 30em;
  display: block;
  height: calc(100vw * var(--ratio));
  max-height: calc(var(--container-width) * var(--ratio));
  width: 100%;
  max-width: var(--container-width);
}

HTML/Body с высотой 100%

Что делать, если нам нужно, чтобы элемент body занимал 100% высоты области просмотра? Это распространённый вопрос как в веб-сообществе в целом, так и на сайте StackOverflow в частности.

Сначала нужно задать height: 100% элементу html. Это будет гарантировать, что корневой элемент имеет высоту 100%. Затем добавляем min-height для элемента body. Причина, по которой используется именно min-height в том, что это свойство позволяет высоте элемента body быть динамичной, и подстраиваться, каким бы большим не было содержимое

CSS

html {
  height: 100%;
}
 
body {
  min-height: 100%;
}

Демо

Примечания

Минимальная ширина и блочные элементы

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

CSS функции сравнения

При исследовании на StackOverflow основных проблем, с которыми сталкиваются разработчики, я наткнулся на этот вопрос, в котором автор спрашивает следующее:

Реально ли сделать что-то подобное? max-width: calc(max(500px, 100% - 80px)) или может вот такое max-width: max(500px, calc(100% - 80px)))

Желаемое поведение заключается в том, чтобы удерживать ширину элемента не более 500px. Если ширина области видимости недостаточна, чтобы вместить элемент, то ширина должна быть 100% – 80px.

Что касается решения, опубликованного в ответ на вопрос, я попробовал применить его и он работает в Chrome 79 и Safari 13.0.3. Хоть это и выходит за рамки статьи, я всё же приведу здесь решение:

CSS

.yourselector {
  max-width: calc(100% - 80px);
}
 
/* Update: I changed the max-width from 500px to 580px. Thanks @fvsch */
@media screen and (max-width: 580px) {
  .yourselector {
    max-width: 500px;
  }
}

Источники и материалы для дальнейшего изучения

• Flex items and min-width:0 от Dominic McPhee
• CSS: Flex and “min-width” от Dominik Schöler
• Flexbugs от Philip Walton

В этой статье рассмотрим, как можно задавать ширину и какими свойствами стоит делать это. Для первого примера возьмём блочный элемент div. По умолчанию он имеет высоту равную нулю (если ничего не содержит) и занимает 100% ширины родительского элемента. Попробуем задать ему ширину в 200 пикселей и высоту в 150. Для этого используем CSS свойства width (ширина) и height (высота):

<div style="width: 200px; height:150px;"></div>

Получится такой результат:

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

<div style="width: 40%; height:150px;"></div>

Получится такой результат:

К сожалению, задать высоту для блочного элемента в процентах не получится. Если написать «height:50%;», то в разных браузерах будет диаметрально противоположный результат, поэтому лучше считать такую запись ошибкой.

Только у одного элемента можно задать свойство height в процентах, а точнее у псевдоэлементов :before и ::after. Читайте о них в статье Псевдоэлементы (:before, ::after)

Максимальная и минимальная ширина (max-width и min-width)

Жёсткое ограничение ширины — это не лучший способ строить сайт. Потому что в таком случае появятся проблемы с адаптацией под мобильные и планшеты: ширина экрана может быть меньше ширины блока. Тогда часть сайта будет выходить пределы вёрстки сайта и появится горизонтальная прокрутка, чего у версии сайта на мобильном быть не должно. Поэтому вместо жёсткого задания ширины используется ограничение сверху через CSS свойство max-width. Мы знаем, что блочный элемент div пытается занять всю ширину родительского элемента, как будто по умолчанию у него есть свойство width и оно имеет значение 100%.

<div style="max-width: 400px; height:50px;"></div>

Результат будет аналогичен предыдущему примеру:

Но теперь, если вы возьмёте окно своего браузера и сузите до 400 пикселей и меньше, то увидите как контейнер div уменьшает свои размеры, чтобы не выпрыгивать за пределы вёрстки. Если же изменить «max-width:400px;» на «width:400px», то блок будет выходить за пределы родительского элемента:

По смыслу свойство min-width является диаметрально противоположным к max-width. Оно ограничивает минимальную ширину элемента, но не ограничивает максимальную.

Максимальная и минимальная высота (max-height и min-height)

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

Рассмотрим наглядный пример необходимости использования max-height. Допустим, что нам надо сделать чат, где пользователи сайта смогут обмениваться текстовыми сообщениями. Для этого нужно создать контейнер, который будет расти по мере появления в нём новых сообщений. Но как только div достигает определённой высоты, то перестаёт расти и появится полоса прокрутки. Используем следующий CSS код:

<div style="width: 300px; max-height: 100px; 
overflow-y: scroll;"  contenteditable="true">
   Тише, мыши, кот на крыше,
   а котята ещё выше.
   Кот пошёл за молоком,
   а котята кувырком.
   Кот пришёл без молока,
   а котята ха-ха-ха. 
</div>

Весь текст не вместится в div. Поэтому из-за свойства «overflow-y: scroll;» появится полоса прокрутки:

Тише, мыши, кот на крыше,
а котята ещё выше.
Кот пошёл за молоком,
а котята кувырком.
Кот пришёл без молока,
а котята ха-ха-ха. 

Благодаря атрибуту contenteditable=»true» у тега div в примере, Вы можете изменить текст внутри контейнера. Попробуйте удалить и добавить несколько строк. Размер контейнера будет подстраиваться под количества текста в нём до тех пор, пока не станет быть равен 100px. Затем появится полоса прокрутки.

По смыслу свойство min-height является диаметрально противоположным к max-height. Оно ограничивает минимальную высоту элемента, но не ограничивает максимальную.

Нет сомнений в том, что с появлением компьютеров задачи, которые раньше занимали вечность, стали намного проще. А сегодня, благодаря смартфонам, это как маленький компьютер в кармане. Конечно, всегда стоит исследовать их использование, поэтому сегодня мы покажем вам это. отображается ли «DPI», «минимальная ширина» или «наименьшая ширина» на экране мобильного телефона Android .

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

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

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

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

Мы можем выполнить этот процесс на из настроек нашего мобильного телефона легко и быстро. Этот вариант называется «минимальная ширина» или «минимальная ширина», и его очень легко распознать. Вы могли бы сказать, что это похоже на поместить приложение в полноэкранный режим , но несколько иначе.

Как установить «DPI», «минимальную ширину» или «минимальную ширину»?

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

Чтобы иметь возможность изменить настройку DPI, вы должны ввести параметр «минимальная ширина» или «минимальная ширина» в меню «Параметры разработчика». Оказавшись там, вы должны введите значение больше уже найденного по умолчанию, т.е. 320 dp (слева), 360 dp (в центре), 500 dp (справа).

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

Как вы увидите, это отличный способ максимально использовать пространство на нашем экране, как и для активировать режим разделения экрана . Еще одна деталь, о которой вам следует помнить, — это то, что вы хорошо умеете писать или писать. сохранить исходное значение DPI потому что у вас не будет проблем, если вы захотите сбросить экран до значений по умолчанию.

Что делать, если на моем мобильном телефоне Android есть опция «DPI»?

Если, независимо от того, насколько сложен ваш поиск, вы не можете найти эту опцию «минимальная ширина» на своем мобильном телефоне, не волнуйтесь, у нее есть решение. Вам просто нужно скачать приложение из просмотр файлов с правами root , например FX File Explorer, и замените «DPI_VALUE» на любое значение, которое вам нравится и подходит именно вам.

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

(1) Сегодняшний план адаптации экрана заголовка

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

Основным принципом его схемы адаптации является вычисление плотности по следующей формуле (плотность означает, сколько пикселей занимает 1 дп на текущем устройстве).

Общая ширина экрана текущего устройства (в пикселях) / общая ширина дизайна (в dp) = плотность

Общая ширина экрана — наименьшая ширина экрана по сравнению с высотой, например: если пиксели экрана 1920 * 1080, общая ширина экрана составляет 1080.
Подробности:
https://mp.weixin.qq.com/s/d9QCoBP6kV9VSWvVldVVwA
https://www.jianshu.com/p/55e0fca23b4f

Также порекомендуйте каркас адаптации экрана, упакованный в соответствии с современной технологией заголовков:
AndroidAutoSize рамка

Использование:
1.

implementation 'me.jessyan:autosize:1.0.0'

Использование:
Заполните глобальный размер проектного чертежа (единица измерения dp) в AndroidManifest. Если вы используете подразделение, вы можете напрямую заполнить размер пикселя без преобразования пикселей в dp.

<manifest>
    <application>            
        <meta-data
            android:name="design_width_in_dp"
            android:value="360"/>
        <meta-data
            android:name="design_height_in_dp"
            android:value="640"/>           
     </application>           
</manifest>

(2) Адаптация режима наименьшей ширины

Следующее содержание исходит отhttps://www.jianshu.com/p/2aded8bb6ede Я просто перечисляю основные

Какая самая маленькая ширина

Наименьшая ширина в переводе на китайский означает минимальную ширину, так что же означает эта минимальная ширина?

Система будет сопоставлять значения-swdp в соответствии с минимальной шириной текущего экрана устройства. Почему бы не сопоставить значения, основанные на ширине, а добавить слова минимум?

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

Как рассчитывается значение наименьшей ширины

Нам нужно вычислить значение smalllestWidth текущего устройства, прежде чем мы сможем узнать, какой папке values-swdp должно соответствовать текущее устройство.

Например:
Мы предполагаем, что информация на экране устройства составляет 1920 * 1080, 480 точек на дюйм

В соответствии с приведенными выше правилами, нам нужно выбрать наименьшее значение в высоте и ширине экрана в качестве минимальной ширины, 1080 <1920, очевидно, что 1080 пикселей — это минимальное значение ширины, которое мы ищем, но единица минимальной ширины — это dp, поэтому мы должны Конвертировать px в dp

Используйте следующую формулу:
px / density = dp
DPI / 160 = density

Таким образом, окончательная формула px / (DPI / 160) = dp

Таким образом, минимальная ширина, которую мы получаем, составляет 360 dp = 1080 / (480/160).

Теперь, когда мы вычислили минимальную ширину текущего устройства, равную 360 dp, мы знаем, что система поможет нам сопоставить файл dimensions.xml в папке values-sw360dp на основе этой минимальной ширины. Если папка value-sw360dp не существует в проекте, система Для совпадения с аналогичными значениями-swdp папки

диммер.xml принцип генерации

Поскольку фактическое значение измерений, на которое мы ссылаемся в макете проекта, исходит из измерения .s.xml в папке values-swdp, которое соответствует минимальной ширине текущего экрана устройства, полезно понять, как создается файл измерения. Понимание схемы адаптации экрана наименьшей ширины
Генерация Dimens.xml включает в себя два фактора:Первый фактор — минимальное эталонное значение ширины.，Второй фактор — сколько папок values-swdp нужно сгенерировать (определяется количеством минимальных ширин, которые нужно адаптировать в проекте)

Первый фактор:

Что означает минимальная ширина ссылки? Простое понимание состоит в том, сколько вам нужно разделить ширину экрана устройства. Предположим, что теперь мы устанавливаем минимальное эталонное значение ширины проекта равным 360, а минимальную ширину равным 360dp, только что вычисленным выше, тогда это решение будет понято, поскольку вы хотите разделить все устройства. Ширина экрана разделена на 360 копий. Решение поможет вам сгенерировать ссылки на размеры от 1 до 360 в файле dimensions.xml. Например, размерs.xml в values-sw360dp выглядит следующим образом:Формула: (минимальная ширина / минимальное контрольное значение) 360dp / 360dp = 1dp (если другие минимальные значения ширины не разделены, старайтесь не сохранять десятичные разряды, если округление вниз влияет на точность)

Второй фактор

Второй фактор — какие минимальные ширины нужно адаптировать? Например, минимальная ширина, которую вы хотите подогнать, составляет 320dp, 360dp, 400dp, 411dp, 480dp, а затем решение сгенерирует значения-sw320dp, values-sw360dp, values-sw400dp, values-sw411dp, values-sw480dp для вашего проекта. Папка ресурса (обычно создается на основе dp основных мобильных телефонов на рынке), например

использование

Пример: чтобы нарисовать картинку 10dp * 10dp

Код создания файла измерения (проект Java):

Код прибывает из:https://github.com/ladingwu/dimens_sw

Просто запустите его самостоятельно:

A.

package dimens.constants;


public enum DimenTypes {

         // Подходит для Android 3.2 и выше. Значение sw большинства мобильных телефонов сконцентрировано в диапазоне 300-460.
	 DP_sw__300(300),  // values-sw300
	 DP_sw__310(310),
	 DP_sw__320(320),
	 DP_sw__330(330);
	 // сколько вы хотите сгенерировать и так далее
  

    /**
           * Минимальная ширина экрана
     */
    private int swWidthDp;




    DimenTypes(int swWidthDp) {

        this.swWidthDp = swWidthDp;
    }

    public int getSwWidthDp() {
        return swWidthDp;
    }

    public void setSwWidthDp(int swWidthDp) {
        this.swWidthDp = swWidthDp;
    }

}

II.

package dimens.utils;


import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.math.BigDecimal;

import dimens.constants.DimenTypes;



public class MakeUtils {

    private static final String XML_HEADER = "<?xml version="1.0" encoding="utf-8"?>rn";
    private static final String XML_RESOURCE_START = "<resources>rn";
    private static final String XML_RESOURCE_END = "</resources>rn";
    private static final String XML_DIMEN_TEMPLETE = "<dimen name="qb_%1$spx_%2$d">%3$.2fdp</dimen>rn";

   
    private static final String XML_BASE_DPI = "<dimen name="base_dpi">%ddp</dimen>rn";
    private  static final int MAX_SIZE = 720;

    /**
     * Сгенерированное имя файла
     */
    private static final String XML_NAME = "dimens.xml";


    public static float px2dip(float pxValue, int sw,int designWidth) {
        float dpValue =   (pxValue/(float)designWidth) * sw;
        BigDecimal bigDecimal = new BigDecimal(dpValue);
        float finDp = bigDecimal.setScale(2, BigDecimal.ROUND_HALF_UP).floatValue();
        return finDp;
    }
    

    /**
           * Генерация всех данных о размере
     *
     * @param type
     * @return
     */
    private static String makeAllDimens(DimenTypes type, int designWidth) {
        float dpValue;
        String temp;
        StringBuilder sb = new StringBuilder();
        try {
            sb.append(XML_HEADER);
            sb.append(XML_RESOURCE_START);
                         // Связанная информация, сгенерированная резервной копией
            temp = String.format(XML_BASE_DPI, type.getSwWidthDp());
            sb.append(temp);
            for (int i = 0; i <= MAX_SIZE; i++) {
            	
                dpValue = px2dip((float) i,type.getSwWidthDp(),designWidth);
                temp = String.format(XML_DIMEN_TEMPLETE,"", i, dpValue);
                sb.append(temp);
            }


            sb.append(XML_RESOURCE_END);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return sb.toString();
    }



    /**
           * Созданная папка назначения
           * Просто пройдите широко и заходите
     *
           * тип перечисления @param
           * @param buildDir папка назначения
     */
    public static void makeAll(int designWidth, dimens.constants.DimenTypes type, String buildDir) {
        try {
                         // Правила генерации
            final String folderName;
            if (type.getSwWidthDp() > 0) {
                                 // Адаптация к Android 3.2+
                folderName = "values-sw" + type.getSwWidthDp() + "dp";
            }else {
            	return;
            }
            
                         // Генерируем целевой каталог
            File file = new File(buildDir + File.separator + folderName);
            if (!file.exists()) {
                file.mkdirs();
            }

                         // Генерируем файл значений
            FileOutputStream fos = new FileOutputStream(file.getAbsolutePath() + File.separator + XML_NAME);
            fos.write(makeAllDimens(type,designWidth).getBytes());
            fos.flush();
            fos.close();


        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

}

III.

package dimens.generator;

import dimens.constants.DimenTypes;
import dimens.utils.MakeUtils;
import java.io.File;

public class DimenGenerator {

    /**
           * Размер эскизного проекта (укажите ширину эскизного проекта вашего собственного дизайнера)
     */
    private static final int DESIGN_WIDTH = 375;

    /**
           * Высота эскизного проекта (заполните высоту эскизного проекта вашего собственного дизайнера)
     */
    private static final int DESIGN_HEIGHT = 667;

    public static void main(String[] args) {
                 int smalllest = DESIGN_WIDTH> DESIGN_HEIGHT? DESIGN_HEIGHT: DESIGN_WIDTH; // найти минимальную ширину
        DimenTypes[] values = DimenTypes.values();
        for (DimenTypes value : values) {
                         File directory = new File (""); // Для удобства установите текущую папку, файл измерения будет создан в папке, в которой находится проект, и пользователи могут изменить его самостоятельно.
            MakeUtils.makeAll(smallest, value, directory.getAbsolutePath());
        }

    }

}

преимущество

1. Очень стабильная, очень низкая вероятность несчастных случаев

2. Без потери производительности

3. Возможности адаптации можно свободно контролировать, не затрагивая другие трехсторонние библиотеки.

4. С помощью плагинов, стоимость обучения низка

недостаток

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

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

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

4. Если вы хотите использовать sp, вам также нужно сгенерировать серию измерений, что снова увеличит громкость приложения.

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

6. Не может адаптироваться на основе высоты. Учитывая, что название этой схемы называется схемой адаптации минимальной ширины, вы должны знать, что эта схема может быть адаптирована только на основе ширины. Почему текущую схему адаптации экрана можно адаптировать только на основе высоты или ширины, см.https://github.com/JessYanCoding/AndroidAutoSize/issues/8

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

Ссылка:https://www.jianshu.com/p/2aded8bb6ede
https://mp.weixin.qq.com/s/X-aL2vb4uEhqnLzU5wjc4Q

Наилучшее на сегодняшний день решение по адаптации экрана заголовка:https://github.com/JessYanCoding/AndroidAutoSize