電子報讀者募集中！歡迎 訂閱電子報！

介紹如何將多個 CSS 文件合併為一個主文件以實現響應式設計，並解釋 @media 查詢的使用方式，以及如何在不同屏幕寬度下覆蓋和調整樣式。

Q: 我現在有 6 個 .css 檔案，依照不同 .ejs 進行分類。我現在想要做成 RWD 響應式網站，請問怎麼辦？

A: 1. 合併所有 CSS 文件

首先，將所有 CSS 文件的內容合併到一個主 CSS 文件中，例如 main.css。這樣可以集中管理樣式，並在一個地方進行響應式設計的調整。

    /* main.css */
    /* 引入其他 CSS 文件 */
    @import url('style.css');
    @import url('style_archives.css');
    @import url('style_header.css');
    @import url('style_index_post.css');
    @import url('style_post.css');
    @import url('style_sidebar.css');

    /* 響應式設計 */
    @media (max-width: 768px) {
        .home-intro h2 {
        font-size: 1.5em;
        }
    
        header {
        flex-direction: column;
        }
    
        .header-content {
        flex-direction: column;
        }
    
        nav {
        flex-direction: column;
        align-items: flex-start;
        }
    
        nav a {
        margin-bottom: 10px;
        }
    
        /* Archives 主內容 */
        main {
        padding: 10px;
        }
    }
    
    @media (max-width: 480px) {
        .home-intro h2 {
        font-size: 1.2em;
        }
    
        header {
        padding: 15px;
        }
    
        .header-content {
        flex-direction: column;
        align-items: center;
        }
    
        nav {
        align-items: center;
        }
    
        button {
        padding: 8px 16px;
        font-size: 0.9em;
        }
    
        /* Archives 主內容 */
        main {
        padding: 5px;
        }
    }

Q: @media 放在 .css 最下面，代表當寬度小於 480px 時，它會把 header 從原本的大小改成新的大小嗎？會覆蓋原本的樣式嗎？

A: 是的。

@media 查詢在 CSS 文件中的位置確實會影響它的應用，但 @media 查詢的作用是根據條件（如屏幕寬度）覆蓋或添加樣式。

如何工作

1. 基本樣式：在 CSS 文件中，首先定義的樣式是對所有設備和屏幕尺寸的基礎樣式。

2. 媒體查詢：@media 查詢用於在特定條件下（如屏幕寬度小於 480px）覆蓋或添加樣式。這些樣式會在滿足條件時應用並覆蓋基礎樣式。

    這是範例唷~~
    /* 基礎樣式 */
    header {
    background: linear-gradient(135deg, #81d4fa, #4fc3f7);
    padding: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    }
   
    /* 響應式設計 */
    @media (max-width: 768px) {
    header {
        flex-direction: column;
        padding: 15px;
    }
    }
   
    @media (max-width: 480px) {
    header {
        padding: 10px;
    }
    }
   

解釋：

• 基礎樣式：所有設備和屏幕尺寸都會首先應用這些樣式。header 元素會有線性漸變背景、20px 的內邊距，並以橫向排列方式顯示內容。
• 媒體查詢： * 當屏幕寬度小於等於 768px 時，header 的顯示方式會變成縱向排列（flex-direction: column），內邊距變為 15px。
• 當屏幕寬度小於等於 768px 時，header 的顯示方式會變成縱向排列（flex-direction: column），內邊距變為 15px。 * 當屏幕寬度小於等於 480px 時，header 的內邊距進一步減少為 10px。

覆蓋和添加

當屏幕寬度小於 768px 時，第一個媒體查詢會將 header 的排列方式從橫向改為縱向，並修改內邊距為 15px。當屏幕寬度進一步縮小到 480px 以下時，第二個媒體查詢會進一步調整內邊距為 10px。這樣，第二個媒體查詢中的樣式會在第一個媒體查詢的樣式基礎上進行覆蓋。

載入順序

CSS 的載入順序確保了後面定義的樣式會覆蓋前面的樣式。媒體查詢本身不會影響 CSS 文件的順序，只是根據條件選擇性地應用樣式。無論媒體查詢放在 CSS 文件的哪個位置，只要它們符合條件，它們就會生效並覆蓋之前的樣式。 這種層疊和覆蓋的機制使得響應式設計變得靈活且易於管理。