前言
公司要做大屏，但是大屏還要有個嵌在系統的版本，螢屏（iframe）小了但字體大了怎么辦，網上找了很多代碼都很長，個人參考了資料后實作了一個一行代碼 font-size 回應式，
TL;DR
html {
font-size: clamp(12px, calc(7px + 0.390625vw), 24px);
}
解釋
- 在
<html>標簽中定義是為了定義全域字體基準大小，目前開發幾乎所有的字體都用rem作為單位，而rem單位代表的是全域字體大小的多少倍，所以只要設定全域大小整個頁面所有rem都會跟著相應， clamp三個引數分別是最小值、相對值和最大值，如果相對值小于最小值則回傳最小值，如果相對值在最大值最小值之間則回傳相對值，如果相對值大于最大值則回傳最大值，這樣就限定了可縮放大小的范圍，calc(7px + 0.390625vw)則代表自起始值開始，根據螢屏變化量增加像素數，0.390625vw的公式是(最大螢屏字體大小-最小螢屏字體大小)/(最大螢屏寬度-最小螢屏寬度) * 100，當然不乘100可以使用0.00390625%
參考
- clamp() - CSS: Cascading Style Sheets | MDN
- Responsive Font Size (Optimal Text at Every Breakpoint)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/552026.html
標籤：Html/Css
上一篇：學系統集成專案管理工程師（中項）系列19b_成本管理（下）
下一篇：返回列表