css的边距和字体的响应式写法

 

简述:边距等比缩放方法 1:使用vw单位vw代表视口宽度的 1/100,适用于宽度自适应。边距 padding:calc(72px*(100vw/1920)); 字体 font-size:calc(72px*(100vw/1920));方法 2:使用clamp()限制最小/最大值防止padding过小或过大,可以使用clamp(): padding:clamp(24px,3.75vw,72px); font-size:clamp(24px,3.75vw,72px);

详情:

边距等比缩放

方法 1:使用 vw 单位

vw 代表视口宽度的 1/100,适用于 宽度自适应

 边距
 padding: calc(72px * (100vw / 1920));  
 
 字体
 font-size: calc(72px * (100vw / 1920));


方法 2:使用 clamp() 限制最小/最大值

防止 padding 过小或过大,可以使用 clamp()

  
padding: clamp(24px, 3.75vw, 72px); 
font-size: clamp(24px, 3.75vw, 72px);
vertical-align:super;  字体上下标