RWD實戰

前置作業

先將原本的 src/scss/index.scss 改為 desktop.scss

建立 src/scss/mobile.scss

@import 'desktop';

dist/index.html 引入 css/mobile.css

Step 1

增加漢堡盒樣式

dist/index.html

<div id="header">
    <div class="container">
        <div class="header-content">
            <!-- ... -->
            
            <div class="mobile-menu">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
</div>

src/scss/mobile.scss

.mobile-menu {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    span {
        display: inline-block;
        width: 25px;
        height: 4px;
        margin-bottom: 4px;
        background: #000;

        &:last-child {
            margin-bottom: 0;
        }
    }
}

demo

Step 2

預設漢堡盒隱藏
當寬度小於 768px 時，隱藏選單，顯示漢堡盒

src/scss/mobile.scss

.mobile-menu {
    // ...
    // display: flex;
    display: none
}

@media screen and (max-width: 768px) {
    .mobile-menu {
        display: flex;
    }

    .header-menu {
        display: none;
    }
}

demo

Step 3

點擊漢堡盒時

變換樣式為 X
顏色為紅色

src/scss/mobile.scss

.mobile-menu {
    // ...

    span {
        // ...

        transition: all 0.3s
    }

    &:hover {
        span:first-child {
            transform: rotate(45deg);
            margin-top: 4px;
            position: absolute;
            background: red;
        }

        span:nth-child(2) {
            display: none;
        }

        span:last-child {
            transform: rotate(-45deg);
            background: red;
        }
    }
}

demo

Step 4

目前使用 :hover 來觸發

但是手機版沒有 :hover 可以用，所以要改用相鄰選擇器來處理狀態

增加 checkbox

dist/index.html

<div id="header">
    <div class="container">
        <div class="header-content">
            <input type="checkbox" id="mobile-switch" />
            <!-- ... -->
        </div>
    </div>
</div>

src/scss/mobile.scss

#mobile-switch {
    display: none;
}

選單改為 label 觸發 checkbox

dist/index.html

<div id="header">
    <div class="container">
        <div class="header-content">
            <!-- ... -->
            <label for="mobile-switch" class="mobile-menu">
                <span></span>
                <span></span>
                <span></span>
            </label>
        </div>
    </div>
</div>

將原本的 :hover 樣式搬移到相鄰選擇器

src/scss/mobile.scss

#mobile-switch {
    // ...

    &:checked ~ .mobile-menu {
        span:first-child {
            transform: rotate(45deg);
            margin-top: 4px;
            position: absolute;
            background: red;
        }

        span:nth-child(2) {
            display: none;
        }

        span:last-child {
            transform: rotate(-45deg);
            background: red;
        }
    }
}

demo

Step 5

當 checkbox 被勾選時，顯示選單

src/scss/mobile.scss

#mobile-switch {
    // ...

     &:checked ~ .header-menu {
        display: flex;
    }
}

手機版選單位置

src/scss/mobile.scss

@media screen and (max-width: 768px) {
    // ...

    .header-menu {
        // ...
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background: inherit;
    }
}

發現寬度怪怪的

src/scss/mobile.scss

.header-content {
    position: relative;
}

手機版選單樣式

src/scss/mobile.scss

@media screen and (max-width: 768px) {
    // ...

    .header-menu {
        // ...

        justify-content: center;
        padding-top: 20px;

        ul {
            flex-direction: column;

            li {
                margin-bottom: 40px;
                margin-right: 0;
            }
        }
    }
}

選單歪一邊？？

複寫 priority 問題

src/scss/mobile.scss

@media screen and (max-width: 768px) {
    // ...

    #header {
        .header-menu {
            // ...
        }
    }
}

demo

Step 6

加入表單手機版處理

翻轉區塊

src/scss/mobile.scss

@media screen and (max-width: 768px) {
    // ...

    #join-form {
        .join-content {
            flex-direction: column;
        }
    }
}

翻轉之後兩個區塊沒有滿版

src/scss/mobile.scss

@media screen and (max-width: 768px) {
    // ...

    #join-form {
        .join-content {
            // ...

            > div {
                width: 100%;
            }
        }
    }
}

左邊區塊去除右邊虛線與內距

src/scss/mobile.scss

@media screen and (max-width: 768px) {
    // ...

    #join-form {
        .join-content {
            // ...

            .join-content-left {
                padding: 0;
                border-right: unset;
            }
        }
    }
}

右邊區塊去除內距

src/scss/mobile.scss

@media screen and (max-width: 768px) {
    // ...

    #join-form {
        .join-content {
            // ...

            .join-content-right {
                padding: 0;
            }
        }
    }
}

demo

Step 7

timeline 手機版

將文字區塊統一放到右邊

src/scss/mobile.scss

@media screen and (max-width: 768px) {
    // ...

    .timeline {
        .item:nth-child(even) {
            .text {
                right: unset;
                left: calc(50% + 50px);
            }
        }
    }
}

文字區塊擠在一起了

src/scss/mobile.scss

@media screen and (max-width: 768px) {
    // ...

    .timeline {
        // ...

        .item {
            min-height: 130px;
        }
    }
}

將區塊靠左邊

src/scss/mobile.scss

@media screen and (max-width: 768px) {
    // ...

    .timeline {
        // ...

        .item {
            // ...

            justify-content: flex-start;
            padding-left: 20px;
        }
    }
}

虛線對齊

src/scss/mobile.scss

@media screen and (max-width: 768px) {
    // ...

    .timeline {
        // ...

        &::after {
            left: 30px;
        }
    }
}

文字區塊靠左

src/scss/mobile.scss

@media screen and (max-width: 768px) {
    // ...

    .timeline {
        .item:nth-child(even) {
            .text {
                right: unset;
                // left: calc(50% + 50px);
                left: calc(20px + 50px);
            }
        }

        .item {
            // ...

            .text {
                right: unset;
                left: calc(20px + 50px);
            }
        }
    }
}

demo

前端開發