CSS自適應排版是指根據不同設備的屏幕尺寸和分辨率來自動調整頁面布局和排版效果,通過使用百分比、em和rem等相對尺寸單位來定義元素的大小和位置,從而使頁面在不同設備上具有更好的可讀性和美觀度。
以下是一個簡單的CSS自適應排版代碼示例:
/* 使用百分比定義元素大小和位置 */ .container { width: 80%; margin: 0 auto; } .header { height: 10%; } .content { height: 70%; } .footer { height: 20%; } /* 使用em和rem定義字體大小 */ body { font-size: 16px; } h1 { font-size: 2rem; } p { font-size: 1em; }
上述代碼中,容器元素.container的寬度為80%(相對于父元素寬度),并水平居中對齊;頭部元素.header、內容元素.content和底部元素.footer等高度按比例分配,分別為頁面高度的10%、70%和20%。
字體大小使用相對單位em和rem來定義,body元素的字體大小為16px,h1元素的大小為2rem,即相對于body元素字體大小的兩倍,p元素大小為1em,即相對于父元素字體大小的倍數。
在實際應用中,我們可以根據需要進一步優化代碼細節,比如根據不同媒體查詢設置不同的布局和大小等。