body { font-size: 16px; font-size: max(14px, 1.6vw); }
上面的代码设置了字体大小的初始值为16像素,然后使用了CSS的max() 函数,让字体大小随着视窗宽度的变化而变化。同时,也设置了一个最小值为14像素,以保证网页在小屏幕设备上也能有一个合适的字体大小。
另一种设置最小字体大小的方法是使用CSS的clamp() 函数。
body { font-size: clamp(14px, 1.2vw, 16px); }
上面的代码将字体大小限制在14号到16号之间,同时也考虑了视窗宽度的变化,在宽屏幕设备上字体会比较大,而在小屏幕设备上字体则会适当地缩小。
无论是使用max() 还是clamp(),设置最小字体大小都是保证网页阅读体验的一个技巧,让网页在不同设备上都有一个合适的字体大小。