是否有可能在一个css夹内设置一个固定值,以使字体大小不是在最小视区宽度和最大视区宽度之间进行zoom ,而是介于最小和最大之间,而在这两个断点之间.
这显然可以通过媒体查询来完成,但为了减少代码量,我想知道是否可以使用CLAMP来完成.
最小视区680px;最大视区1020px;
clamp(20px, -- 28px when > min viewport && < max viewport -- , 40px);
是否有可能在一个css夹内设置一个固定值,以使字体大小不是在最小视区宽度和最大视区宽度之间进行zoom ,而是介于最小和最大之间,而在这两个断点之间.
这显然可以通过媒体查询来完成,但为了减少代码量,我想知道是否可以使用CLAMP来完成.
最小视区680px;最大视区1020px;
clamp(20px, -- 28px when > min viewport && < max viewport -- , 40px);
通过嵌套clamp()
个是可能的,但不是直观的
h1 {
/* first breakpoint*/
--w1: 1020px;
/* second breakpoint*/
--w2: 680px;
font-size:
clamp(clamp( 20px, /* < w2 */
(100vw - var(--w2))*1000,28px), /* > w2 && < w1 */
(100vw - var(--w1))*1000,40px); /* > w1 */
}
<h1>a title</h1>
如果您想了解更多细节,我在本文中使用的是类似的技巧:https://css-tricks.com/responsive-layouts-fewer-media-queries/