CSS是前端開發中非常重要的一項技能,其中的等比例放大技巧更是不可或缺。等比例放大是指在不改變圖片、字體等元素原有寬高比的前提下,將它們放大到一個更大的尺寸。
/*等比例放大圖片*/ img { max-width: 100%; height: auto; } /*等比例放大字體*/ body { font-size: calc(14px + (20 - 14) * ((100vw - 320px) / (1920 - 320))); }
在上述代碼中,img元素的max-width屬性設置為100%,表示圖片在其父元素的寬度范圍內展示,并通過height: auto自動調整高度,從而保證等比例放大。
對于字體等元素,我們可以利用CSS3中的計算屬性calc來實現等比例放大。上述代碼中,我們通過320px至1920px寬度之間的viewport寬度變化來控制字體大小從14px到20px的等比例放大效果。