Web Design Laboratory
什麼是RWD響應式網頁
RWD響應式網頁最詳盡的介紹與操作使用方法
什麼是RWD響應式網頁?
RWD(Responsive Web Design)響應式網頁設計是一種網頁設計技術,讓網站能夠自動適應不同尺寸的螢幕,從桌面電腦、平板電腦到手機,都能提供最佳的瀏覽體驗。簡單來說,就是一個網站能根據使用者使用的裝置,自動調整網頁的版面和內容,讓使用者在任何裝置上都能輕鬆瀏覽。
RWD主要透過CSS媒體查詢(Media Queries)來實現。CSS媒體查詢允許根據不同的螢幕尺寸、解析度、方向等條件,來應用不同的樣式。
第一步 : 在網頁內碼中,設定Viewport,告訴瀏覽器如何顯示網頁
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
</html>
第二步 : 使用CSS媒體查詢,根據不同的螢幕尺寸,應用不同的樣式
CSS
@media (min-width: 768px) {
/* 螢幕寬度大於等於768px時的樣式 */
}
@media (max-width: 767px) {
/* 螢幕寬度小於767px時的樣式 */
}
更深度了解Media Query裝置分辨率
撰寫 Media Query 時需注意順序,後方程式碼會取代前方程式碼進行套用。
行動裝置為主
@media screen and (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media screen and (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media screen and (min-width: 992px) { ... }
// X-Large devices (large desktops, 1200px and up)
@media screen and (min-width: 1200px) { ... }
// XX-Large devices (larger desktops, 1400px and up)
@media screen and (min-width: 1400px) { ... }
桌機為主
// X-Small devices (portrait phones, less than 576px)
@media screen and (max-width: 575.98px) { ... }
// Small devices (landscape phones, less than 768px)
@media screen and (max-width: 767.98px) { ... }
// Medium devices (tablets, less than 992px)
@media screen and (max-width: 991.98px) { ... }
// Large devices (desktops, less than 1200px)
@media screen and (max-width: 1199.98px) { ... }
// X-Large devices (large desktops, less than 1400px)
@media screen and (max-width: 1399.98px) { ... }