要做自适应的页面,但是有时候文字定了font-size后屏幕大小变化但是文字不跟着变。这时使用calc对属性值进行计算,实现宽度改变时字体大小跟随改变
利用css的自动计算方法calc
font-size:calc(100vw * 100 / 1920);
font-size:calc(100vw * 字体大小 / 屏幕大小);
calc:是一个css自带的计算方法,可以自动计算后返回px单位的值
100vw:vw是屏幕的宽度。也就是百分百屏幕宽度。
*100:这里乘的100代表100px。
1920:设计稿的宽度
比如:我的需求是屏幕上要一个100px大小的文字,我的设计稿按照是1920*1080大小开发的,但是我需要屏幕大小变化的时候我的100px的字体大小根据窗口变化也放大缩小,因为如果她一直是100px,就会被挤变形到别的位置了。
同样宽度想实现自适应也可以将文字大小属性改为宽度属性