IT課程 CSS基礎 033_響應式佈局

響應式佈局

響應式佈局是一種能夠適應不同屏幕尺寸和設備的網頁設計方法。通過使用響應式佈局，可以使網頁在不同的設備上保持良好的顯示效果，無論是在桌面電腦、平板電腦還是手機上。

媒體查詢

使用 CSS 的媒體查詢可以根據設備的特徵（如屏幕寬度、高度、設備類型等）應用不同的樣式。這使得你可以為不同的屏幕尺寸定義不同的佈局。

示例：

1
/* PC */
2
@media (min-width: 992px) {
3
    * {
4
        background: yellow
5
    }
6
}
7
/* 平板電腦 */
8
@media (min-width: 768px) and (max-width: 992px) {
9
    * {
10
        background: red
11
    }
12
}
13
/* 普通手機 */
14
@media (min-width: 576px) and (max-width: 768px) {
15
    * {
16
        background: green
17
    }
18
}
19
/* 小屏設備 */
20
@media (max-width: 576px) {
21
    * {
22
       background: blue
23
    }
24
}

效果：示例效果

響應式圖片

使用 max-width: 100%; 來確保圖像和媒體元素在小屏幕上不會超出其容器。示例：

1
    img {
2
      max-width: 100%; /* 圖像最大寬度為其包含元素的100% */
3
      height: auto;    /* 保持寬高比，防止圖像變形 */
4
    }
5

6
    /* 在小屏幕上調整圖像大小 */
7
    @media screen and (max-width: 600px) {
8
      img {
9
        max-width: 50%; /* 圖像最大寬度為其包含元素的50% */
10
      }
11
    }

1
    <img src="zhaojian.jpg" alt="Responsive Image">

效果：示例效果

視口設置

使用 <meta> 標籤設置視口，以確保頁面在移動設備上正確縮放。

示例：

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

這個元標籤告訴移動端瀏覽器，它們應該將視口寬度設定為設備的寬度，將文檔放大到其預期大小的 100%，在移動端以你所希望的為移動優化的大小展示文檔。

和視口元標籤一起，你可以使用另外幾個設定，但大體說來，上面那行就是你想要使用的。

initial-scale：設定了頁面的初始縮放，我們設定為 1。
height：特別為視口設定一個高度。
minimum-scale：設定最小縮放級別。
maximum-scale：設定最大縮放級別。
user-scalable：如果設為 no 的話阻止縮放。

避免使用minimum-scale、maximum-scale，尤其是 user-scalable設置為no。以保證用戶可自行縮小、放大。

響應式佈局

媒體查詢

響應式圖片

視口設置

評論