CSS自適應技術不斷進步,而其中一種常用的方法就是使用rem。和其他相對單位不同,rem的大小是相對于根元素的字體大小而定的,在移動設備上便可實現自適應。下面介紹一般的css自適應rem寫法。
/* 設置根元素字體大小為屏幕寬度的 1/10 */ html { font-size: calc(100vw / 10); } /* 設置基準字體大小(例如16px) */ body { font-size: 16px; } /* 對于一般元素的字體大小,以基準字體大小為基礎,使用rem為單位進行設置 */ p { font-size: 1.5rem; /* 相當于基準字體 16 * 1.5 = 24px */ } /* 對于border、margin、padding等屬性,同樣使用rem單位進行設置 */ button { border: 0.2rem solid black; padding: 0.5rem 1rem; }
以上代碼中,首先設置根元素html的字體大小為屏幕寬度的1/10,隨后設置基準字體大小,這里為16px。對于一般的元素字體大小,通過rem單位進行設置,這樣可以保證字體大小能夠根據根元素字體大小實現自適應。同樣,對于其他屬性,例如border、margin、padding等,也同樣使用rem單位進行設置,這樣可以實現元素大小的自適應。
總的來說,這種寫法較為簡單,實現了基本的CSS自適應效果,并且隨著后續的優化,可以通過rem單位不斷對各個屬性進行設置,實現更好的自適應效果。