CSS3 rem布局是指使用rem單位作為網頁的基本尺寸單位,以此來實現靈活、自適應的布局效果。rem是指相對于根元素(即html元素)字號的相對單位,因此可以隨著瀏覽器窗口大小的變化而實現自適應。
html { font-size: 16px; /* 設置根元素字號 */ } body { font-size: 1rem; /* 相對于根元素字號,1rem等于16px */ } .box { width: 10rem; /* 相對于根元素字號,10rem等于160px */ height: 5rem; /* 相對于根元素字號,5rem等于80px */ font-size: 1.2rem; /* 相對于根元素字號,1.2rem等于19.2px */ }
如上代碼中,我們設置html元素的字號為16px,即1rem等于16px。接著,在body元素中,我們將字號設置為1rem,以表示使用rem作為基本尺寸單位。最后,在.box類中,我們設置了寬度、高度和字號,使用了相對于根元素字號的rem單位。
通過這樣的設置,當屏幕大小發生變化時,根元素的字號也會隨著變化,因此網頁的布局效果也會實現自適應。這樣一來,我們就可以在不同尺寸的屏幕上顯示出更好的視覺效果了。