Css calc width: Функция calc() — CSS | MDN

calc() как значение единицы CSS

Могу ли я использовать

Поиск

?

calc() как значение единицы CSS

— CR

• Глобальное использование

  97,48% + 0,88% знак равно 98,36%

Метод допуска расчетных значений для единиц длины, т. е. ширина: расчет (100% - 3em)

Хром

1. 4 — 18: Not supported
2. 19 — 25: Supported
3. 26 — 105: Supported
4. 106: Supported
5. 107 — 109: Supported

Edge

1. 12 — 105: Supported
2. 106: Поддерживается

Safari

1. 03% — Not supported»> 3,1 — 5,1: не поддерживается
2. 6: Поддерживается
3. 6,1 — 16,0: Поддержано
4. 16,1: Поддержал
5. 16,2 -TP: Поддержал

0

0

16,2 -TP: не поддерживается

4 — 15: Поддерживается

16 — 105: Поддерживается

106: Поддерживается

107 — 108: Поддерживается

Opera

1. 9 — 12,1: не поддерживается
2. 48% — Supported»> 15–9074
3. 9007
22. 07% — Not supported»>
38. . Supported

IE

1. 5.5 — 8: Not supported
2. 9: Partial support
3. 01% — Partial support»> 10: Partial support
4. 11: Partial support

Chrome for Android

1. 106: Supported

Safari on iOS

1. 3.2 — 5.1: Not supported
2. 6: Supported
3. 7 — 16.0: Supported
4. 16.1: Supported

Samsung Internet

1. 4 — 17.0: Supported
2. 18.0: Supported

Opera Mini

1. Все: не поддерживается

Opera Mobile

1. 10 — 12,1: не поддерживается
2. 01% — Supported»> 64: Поддерживается

UC Browser для Android

9034

.0015

Android Browser

1. 2.1 — 4.3: Not supported
2. 4.4 — 4.4.4: Partial support
3. 106: Supported

Firefox for Android

1. 105: Supported

QQ Browser

1. 13.1 : Поддерживается

Браузер Baidu

1. 13.18: Поддерживается

Браузер KaiOS

1. 2.5: Поддерживается

Поддержка в более старых нестандартных версиях IE9 может быть частично эмулирована0018 выражение() синтаксис.

Из-за того, что браузеры по-разному обрабатывают округление субпикселей, макеты, использующие выражения calc() , могут иметь неожиданные результаты.

Ресурсы:

MDN Web Docs — calc

Статья Mozilla Hacks

WebPlatform Docs

Все, что вам нужно знать о CSS Calc

27 июля 2020 г.

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

Если вы предпочитаете учиться визуально, посмотрите видеоверсию этой статьи.

Что такое CSS Calc?

Во-первых, нам нужно поговорить о том, что такое CSS calc и как его использовать. Проще говоря, возможный CSS calc — это просто функция CSS, похожая на rgb , var и т. д., которая позволяет выполнять сложение, вычитание, деление и умножение в различных единицах CSS. Вот простой пример.

Приведенный выше CSS устанавливает ширину этого поля на 300 пикселей (200 пикселей плюс 100 пикселей).

По общему признанию, это не очень полезно. Я имею в виду, что мы могли бы просто написать 300 пикселей и сэкономить кучу времени, но это только начало вычислений CSS.

Объединение различных модулей

Верно. С помощью CSS calc мы можем комбинировать различные единицы CSS для создания значений, которые невозможно представить с помощью традиционных единиц CSS. Например, что, если мы хотим создать поле шириной 30 пикселей от ширины 100 vw. По сути, коробка 100vw, из которой удалено 30 пикселей пространства.

Это все, что вам нужно сделать. Просто поместите 100vw и 30px в вашу функцию расчета, и CSS позаботится обо всей сложной математике за вас. Теперь независимо от того, насколько широк или мал ваш экран, поле всегда будет на 30 пикселей меньше, чем полная ширина экрана.

Одного этого достаточно, чтобы сделать вычисление CSS удивительным, но вы можете пойти еще дальше и объединить это с переменными CSS.

CSS-переменные и калькулятор

Прежде чем мы перейдем к использованию CSS-переменных с calc, обязательно ознакомьтесь с этой статьей, в которой рассказывается все, что вам нужно знать о CSS-переменных.

Теперь, когда мы закончили, мы можем поговорить о том, как вы можете использовать переменные CSS с calc. Все, что вам нужно сделать, это заменить одно из ваших значений в функции calc переменной. Например:

Теперь у нас есть блок шириной 200 пикселей, так как мы умножаем переменную 100px --w на 2.

Преобразование единиц с помощью Calc значение, не имеющее единиц, в значение с единицами, просто умножив значение на 1 типа единицы измерения, в который вы хотите преобразовать. Это очень полезно, если у вас есть переменные CSS, установленные в JS, которые не включают единицу измерения.

С помощью этой простой функции вычисления я преобразовываю переменную --fav-num

из безразмерного значения в значение, основанное на пикселях.