Генератор CSS clamp
Введіть ширину екрана й розміри для малого та великого екранів, щоб створити CSS, який плавно змінює розмір тексту або проміжки. Перегляньте результат у px або rem, а потім скопіюйте CSS і код Tailwind чи збережіть їх як текст.
Що можна робити
Задавання двох пар ширини та розміру
Задайте розміри для вузької та широкої області перегляду. Підтримується 6 типів: розмір шрифту, проміжки, внутрішні відступи, зовнішні відступи, ширина й висота.
Створення коду у px або rem
Вводьте всі значення у px, а для виведення виберіть px або rem. Отримайте оголошення CSS і код довільної властивості Tailwind.
Негайна перевірка створеного CSS
Застосуйте CSS до двох елементів у попередньому перегляді. Перевірте відображення тексту й проміжків за поточної ширини рамки.
Як користуватися
Виберіть властивість для зміни
Виберіть властивість CSS, яку потрібно задати, наприклад font-size для розміру тексту або gap для проміжку між елементами.
Введіть дві ширини області перегляду та розміри
Введіть обидві ширини області перегляду та відповідні розміри у px. Розмір для меншої ширини має бути не більшим за розмір для більшої.
Перевірте одиницю виведення та створіть код
У розширених налаштуваннях виберіть px або rem. Для rem також перевірте базовий розмір шрифту перед натисканням «Створити CSS».
Попередній перегляд і отримання коду
Скопіюйте CSS і вставте його в потрібне місце. Відкрийте код Tailwind, щоб отримати його. Також можна скопіювати обидва елементи разом або зберегти їх як текст.
Коли стане в пригоді
Плавна зміна розміру заголовків
Коли потрібно задавати розмір тексту для вузької та широкої області перегляду й плавно змінювати його між цими ширинами, а не перемикати ступінчасто.
Налаштування проміжків відповідно до області перегляду
Коли потрібно змінювати проміжки між картками або внутрішні відступи в межах заданих мінімального й максимального розмірів.
Задавання плавних розмірів і перегляд результату
Три значення у clamp
clamp — це функція CSS, що задає мінімальне, плавно змінюване та максимальне значення. Створена формула поєднує дві контрольні точки лінійним виразом і обмежує розміри за межами діапазону кінцевими значеннями.
Введення у px; виведення у px або rem
Ширини області перегляду та розміри вводяться у px. Для rem розміри й постійний доданок діляться на базовий розмір шрифту, а коефіцієнт vw для ширини області перегляду залишається без змін.
Узгодьте базове значення rem із місцем використання коду
За замовчуванням у коді 1rem дорівнює 16px. Якщо в місці використання коду розмір шрифту кореневого елемента інший, кінцеві розміри та їх зміна також відрізнятимуться. Перевірте результат у місці використання.
Ширину області перегляду визначає рамка попереднього перегляду
Попередній перегляд — це окрема рамка відображення. Значення vw обчислюється за шириною всередині рамки, а не всього екрана. Залежно від властивості однаковий створений CSS застосовується до тексту, проміжку між двома елементами, відступів або розмірів елемента.
Також перевірте код у місці використання
Текст і структура попереднього перегляду незмінні. Також перевірте шрифти, довгий текст, перенесення рядків і збільшення тексту браузером у місці використання коду. Код Tailwind використовує формат довільної властивості; переконайтеся, що у вашому середовищі він виявляється та генерується.
Поширені запитання
Що відбувається за межами заданого діапазону ширини області перегляду?
Для ширини, меншої за менше із заданих значень, використовується мінімальний розмір, а для ширини, більшої за більше значення, — максимальний. Для rem потрібно використовувати той самий базовий розмір шрифту, що й під час створення коду.
Який базовий розмір шрифту використовується для rem?
Визначає, скільки px відповідає 1rem. За замовчуванням це 16px; у розширених налаштуваннях можна задати від 1 до 1000px. Узгодьте розмір шрифту з кореневим елементом у місці використання коду.
Чи можна задати однакові розміри або від’ємні значення?
Для незмінного розміру задайте однакове мінімальне й максимальне значення. Від’ємні значення дозволені лише для margin. Розміри, що зменшуються зі збільшенням області перегляду, не підтримуються.
Чи застосовуються зміни властивостей або значень одразу?
Зміна цих значень очищує створений код і попередній перегляд. Натисніть «Створити CSS», щоб оновити їх. Те саме відбувається під час зміни одиниці виведення або базового розміру шрифту.
Чи можна змінити текст попереднього перегляду?
Зразок тексту та Aa 123 незмінні. Редагувати текст не можна. Також перевірте фактичний текст і ширину відображення на сторінці, де використовується створений CSS.
Введення та результати
- Ширина області перегляду
- Від 1 до 100 000px. Менша ширина області перегляду має бути меншою за більшу. Дозволені й десяткові дроби.
- Розмір
- Від 0 до 10 000px. Лише margin може мати значення до −10 000px. Розмір для меншої області перегляду має бути не більшим за розмір для більшої.
- Виведення
- Оголошення CSS і довільна властивість Tailwind. Збережіть обидва елементи у файлі css-clamp-generator.txt.
- Точність
- Формула використовує коефіцієнти з точністю до 13 значущих цифр. Помилка виникає, наприклад, коли ширини настільки близькі, що округлена формула не може відтворити контрольні точки.