CSS text-size-adjust — роздування тексту на телефоні
Загальний опис
автор: NagarD
Синтаксис
text-size-adjust: none | auto | <відсоток>;| Значення без задання: | auto |
|---|---|
| Наслідує: | Так |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.webkitTextSizeAdjust="none" |
Переглядачі
Переглядачів ще не додано.
Приклади
+ запропонувати свій приклад у пісочниці
Ліворуч — модель того, що телефон робить САМ: розмір тексту в абзаці помножено на 1.7, а заголовок і кнопка лишилися як були. Праворуч — та сама картка без роздування. Дія самої властивості на комп'ютері не видно ніколи, тому роздування тут задано вручну — саме його й вимикає значення none.
HTML
<div class="row">
<div>
<div class="phone inflated">
<h4>Новини компанії</h4>
<p>Ми оновили тарифи й додали нові способи оплати для всіх користувачів.</p>
<span class="btn">Читати далі</span>
</div>
<p class="caption"><span class="bad">Роздуто</span>: абзац став більшим за
заголовок і за напис на кнопці, картка виросла вдвічі.</p>
</div>
<div>
<div class="phone">
<h4>Новини компанії</h4>
<p>Ми оновили тарифи й додали нові способи оплати для всіх користувачів.</p>
<span class="btn">Читати далі</span>
</div>
<p class="caption"><span class="good">Як задумано</span>: пропорції збережено.</p>
</div>
</div>CSS
/* Так це пишуть насправді — на комп'ютері рядок не міняє нічого */
html {
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
}
.row {
display: flex;
gap: 18px;
flex-wrap: wrap;
font: 16px/1.5 system-ui, sans-serif;
}
.phone {
width: 240px;
padding: 10px;
border: 3px solid #4a5568;
border-radius: 14px;
background: #fff;
}
.phone h4 {
margin: 0 0 6px;
font-size: 15px;
}
.phone p {
margin: 0 0 8px;
font-size: 13px;
}
.phone .btn {
display: block;
padding: 6px 10px;
border-radius: 6px;
background: #2f6fd0;
color: #fff;
font-size: 13px;
text-align: center;
}
/* Модель поведінки телефона: довгий абзац помножено, решта — ні */
.inflated p {
font-size: 1.7em;
}
.caption {
margin: 6px 0 0;
max-width: 240px;
color: #5a6472;
font-size: 12px;
}
.bad {
color: #c0392b;
font-weight: 600;
}
.good {
color: #3a9a4f;
font-weight: 600;
}Коментарі
Коментарів ще немає — будьте першим!