DAY01 - [CSS＋RWD] 满版、非满版区块显示

今天文章重点：
- RWD 范围设定
- 事前准备
- 满版区块显示
- 非满版区块显示
- 实际应用
- 参考资料

RWD 范围设定

这系列的练习都会以最基础的手机版、平板与电脑版的三种尺寸范围做练习。
我习惯从小写到大，好处是：只针对目前版面显示做考虑。
如果从大写到小，在思考版面编排时，我会花比较多的时间先把小尺寸不需要显示的内容先做处置，可能在过程中会不小心改动其他设定...
使用 media query 设定：依据使用者装置大小，决定三个范围的版面样式。
参考 Bootstrap5(Breakpoints)。
随着使用者装置大小越来越多样，可以发现RWD Breakpoints越来越细，已达到更好的使用者体验。

在 breaking point 我选择设定 min-width，表示：

X-Small Device(< 576)：显示范围 576px 以下，也包含全域设定。
Medium Device(≥ 768)：最小尺寸为 768px，显示范围 768px ~ 1400px(不含)。
XX-Large Device(≥ 1400)：最小尺寸为 1400px，显示范围 1400px 以上。


    /* 可以将全域设定写在这里，例：body内 统一基础字型 */
    body{
        font-family: 'Roboto', sans-serif;
    }

    /* X-Small Device : default setting
        ...
    */

    @media(min-width: 768px){
        /* Medium Device */
        ...
    }  

    @media (min-width: 1400px) { 
        /* XX-Large devices */
        ... 
    }

如果是从大写到小，记得方向设定要修改为 max-width。

事前准备

reset CSS：使用 meyerweb清除浏览器预设样式。
HTML架构：这次非满版/满版区块显示练习，会使用同一组 HTML档。
- 结构安排：满版容器 > 定宽容器 > 内容容器 > 内容
- 对应下方：.mainIntro > .container > .infoList

    <!-- HTML -->
    <section class="mainIntro">
        <div class="container">
            <h1 class="mainTitle">IT铁人赛-DAY01</h1>
            <ul class="infoList">
                <li class="infoItem">
                    <img src="https://fakeimg.pl/350x350/eae0d0/?text=A" alt="infoItem">
                </li>
                <li class="infoItem">
                    <img src="https://fakeimg.pl/350x350/eae0d0/?text=B" alt="infoItem">
                </li>
                <li class="infoItem">
                    <img src="https://fakeimg.pl/350x350/eae0d0/?text=C" alt="infoItem">
                </li>
                <li class="infoItem">
                    <img src="https://fakeimg.pl/350x350/eae0d0/?text=D" alt="infoItem">
                </li>
            </ul>
        </div>
    </section>

满版区块显示

满版区块概图

步骤：

设定父层容器：

    .infoList{
       display: flex; /* 让子层排排站 */
        flex-wrap: wrap; /* 如果子层宽度 > 父层宽度，允许 子层折行排列 */
    }

定义内容宽度：宽度单位以%，让使用者装置自适应宽度大小。

    /* X-Small Device */
    .infoList .infoItem{
        width: 100%;
    }

    /* Medium Device */
    @media(min-width: 768px){
        .infoList .infoItem{
            width: 50%;
        }
    }

    /* XX-Large Device */
    @media(min-width: 1400px){
        .infoList .infoItem{
            width: 25%;
        }
    }

codepen 完整范例: https://codepen.io/chen-chens/pen/powypjX

非满版区块显示

非满版区块概图

步骤：

在刚刚满版区块显示基础上，加入以下：
定义界线：确认三个范围的定宽容器.container大小。
定义内容宽度：宽度单位以%，配合定宽容器max-width，让使用者装置自适应。
max-width: 600px: 在 Medium Device，如果装置宽度 < 600px，宽度显示 100% ;如果装置宽度 ≥ 600px，宽度显示 600px。

    /* X-Small Device */
    .container{
        max-width: 300px;
        margin: auto;
    }

    /* Medium Device */
    @media(min-width: 768px){
        .container{
            max-width: 600px;
        }
        .infoList .infoItem{
            width: 50%;
        }
    }

    /* XX-Large Device */
    @media(min-width: 1400px){
        .container{
            max-width: 1200px;
        }
        .infoList .infoItem{
            width: 25%;
        }
    }