CSS3 自適應樣式,是一種前端網頁設計技術。它能夠根據設備屏幕的大小,自動調整網頁的布局、字體大小、圖片大小等,讓網頁在不同尺寸的設備上都能夠良好地展示。
CSS3 自適應樣式的實現方式主要有兩種:媒體查詢和彈性盒子布局。
/* 媒體查詢 */ @media screen and (max-width: 768px) { body { font-size: 16px; } .header { height: 60px; background-color: #f0f0f0; } } /* 彈性盒子布局 */ .container { display: flex; flex-direction: column; align-items: center; } img { width: 100%; height: auto; }
媒體查詢是通過設置不同的 CSS 規則,來適應不同的屏幕尺寸。上面的代碼中,我們設置了屏幕寬度小于 768px 時,body 的字體大小變成 16px,.header 的高度變成 60px,背景顏色變成 #f0f0f0。
彈性盒子布局則是通過設置容器的屬性,讓它的子元素根據容器的大小自動調整布局。上面的代碼中,我們設置了 .container 的屬性為 display: flex,子元素會默認采用彈性盒子布局。并且設置了 img 的寬度為 100%,高度自動調整,讓圖片始終充滿整個容器。
除了上述兩種方法,CSS3 還提供了更多的自適應樣式方案,如彈性布局、響應式表格等等。在實際開發中,可以根據實際情況采用不同的方案。
下一篇css3 菜單滑入