Fluid 文本排版

275 阅读1分钟
 1. min和max方式

     Safari (11.1+) and Chrome (79+)支持

    使用方式:font-size: min(max(16px, 4vw), 22px)

2. clamp方式

     使用方式:font-size: (16px, 4vw, 22px)


3. media  query方式

     html { font-size: 16px; }

     @media screen and (min-width: 320px) { html { font-size: calc(16px + 6 * ((100vw - 320px) / 680)); } } 

     @media screen and (min-width: 1000px) { html { font-size: 22px; } } 


参考:

css-tricks.com/simplified-…

caniuse.com/#search=max…