一行代码搞定 font-size 响应式
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">定义和用法</a></li><ul class="second_class_ul"><li><a href="#_lab2_0_0">说明</a></li><li><a href="#_lab2_0_1">前言</a></li><li><a href="#_lab2_0_2">TL;DR</a></li><li><a href="#_lab2_0_3">解释</a></li></ul><li><a href="#_label1">参考</a></li><ul class="second_class_ul"></ul></ul></div><p class="maodian"><a name="_label0"></a></p><h2>定义和用法</h2><p>font-size 属性可设置字体的尺寸。</p>
<p class="maodian"><a name="_lab2_0_0"></a></p><h3>说明</h3>
<p>该属性设置元素的字体大小。注意，实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮（通常会矮）。</p>
<p>各关键字对应的字体必须比一个最小关键字相应字体要高，并且要小于下一个最大关键字对应的字体。</p>
<p class="maodian"><a name="_lab2_0_1"></a></p><h3>前言</h3>
<p>公司要做大屏，但是大屏还要有个嵌在系统的版本，屏幕（iframe）小了但字体大了怎么办。网上找了很多代码都很长，个人参考了资料后实现了一个一行代码 <code>font-size</code> 响应式。</p>
<p class="maodian"><a name="_lab2_0_2"></a></p><h3>TL;DR</h3>
<div class="jb51code">
<pre class="brush:xhtml;">
html {
font-size: clamp(12px, calc(7px + 0.390625vw), 24px);
}</pre>
</div>
<p class="maodian"><a name="_lab2_0_3"></a></p><h3>解释</h3>
<ul>
<li>在 <code><html></code> 标签中定义是为了定义全局字体基准大小，目前开发几乎所有的字体都用 <code>rem</code> 作为单位，而 <code>rem</code> 单位代表的是全局字体大小的多少倍，所以只要设置全局大小整个页面所有 <code>rem</code> 都会跟着相应。</li>
<li><code>clamp</code> 三个参数分别是最小值、相对值和最大值，如果相对值小于最小值则返回最小值，如果相对值在最大值最小值之间则返回相对值，如果相对值大于最大值则返回最大值。这样就限定了可缩放大小的范围。</li>
<li><code>calc(7px + 0.390625vw)</code> 则代表自起始值开始，根据屏幕变化量增加像素数，<code>0.390625vw</code> 的公式是 <code>(最大屏幕字体大小-最小屏幕字体大小)/(最大屏幕宽度-最小屏幕宽度) * 100</code>，当然不乘 <code>100</code> 可以使用 <code>0.00390625%</code></li>
</ul>
<p class="maodian"><a name="_label1"></a></p><h2>参考</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/clamp" rel="nofollow" target="_blank">clamp() - CSS: Cascading Style Sheets | MDN</a></li>
<li><a href="https://matthewjamestaylor.com/responsive-font-size" rel="nofollow" target="_blank">Responsive Font Size (Optimal Text at Every Breakpoint)</a></li>
</ul>
頁:
[1]