@media
媒體查詢調整不同裝置版面body {
margin: 0;
font-family: "Microsoft JhengHei", sans-serif;
}
.header, .footer {
background: #3498db;
color: white;
text-align: center;
padding: 15px;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
padding: 20px;
}
.card {
background: #f4f6f8;
border-radius: 8px;
padding: 20px;
text-align: center;
font-weight: bold;
}
/* 平板 */
@media (max-width: 992px) {
.container {
grid-template-columns: 1fr 1fr;
}
}
/* 手機 */
@media (max-width: 600px) {
.container {
grid-template-columns: 1fr;
}
}
%
、vw
、vh
、rem
提升彈性max-width: 100%
保持等比縮放@media
設定三個斷點(手機、平板、桌機)vw
、vh
單位的應用效果終於來到第 30 天完成這趟前端煉成之旅。現在能運用 Grid、Flex、RWD 建出完整網頁,我真的感受到自己的成長。
RWD 的概念讓我理解,設計不是為某一種螢幕服務,而是為「所有使用者」打造體驗。當畫面能自然隨裝置調整時,那種順暢的感覺,真的很有成就感。
回顧整個月的練習,我從語法記憶走向理解架構,從跟著抄到能自己規劃。這 30 天不只是前端學習,更是一場「專注力」與「耐心」的修煉。
接下來我想挑戰更進階的部分,像是動畫、互動效果,甚至開始學 JavaScript。
因為我知道——這一切的起點,都是從這 30 天的 HTML × CSS 打下的基礎。