# 1114 - html&CSS ## RWD ### 尺寸計算 - padding 設定百分比，他的 100%是父層的寬度 - 設定`box-sizing: border-box`就不用算 padding，因為此時`width = border + padding + 內容的 width` - 百分比計算方法：[子層每個大小] or [margin 大小] / [父層總大小] x 100 #### 選取器補充 - .col:nth-child(odd) - 也可以設定偶數 even 選取奇數物件（第一個開始數為 1） ![01-1](https://hackmd.io/_uploads/Skub43gNT.png) ```css /* 把奇數個物件設為棕色*/ .col:nth-child(odd) { background-color: brown; } ``` - an+b 選取特定規則物件，規則為`a * n + b` `a` 和 `b` 值可以改變，a 改變的值可為 0 或是負值，b 僅可為 0 或是正數 等於值可以為`an+b`,`an`,`an-b`,`n+b`,`n-b`,`-an+b` - 範例 1 把 2\*n+1 數個物件設為黃綠 ![01-2](https://hackmd.io/_uploads/S1gz42gNa.png) ```css /* 把2*n+1數個物件設為黃綠*/ .col:nth-child(2n + 1) { background-color: yellowgreen; } ``` - 範例 2 把前五個設為黃綠色(使用-n+5) ![01-3](https://hackmd.io/_uploads/rkDf4nlEp.png) ```css /* 把前五個設為黃綠色*/ .col:nth-child(-n + 5) { background-color: yellowgreen; } ``` ### 媒體查詢 ```css @media screen and (條件){ 符合條件時， 會執行的CSS } ``` - 設定最小的寬度，如範例只要大於 768px 就符合此定義 - 為什麼設定 768px? 因為 ipad,ipad-mini 寬度為 768px - 右鍵檢查可以看各螢幕尺寸 - 範例： **只要大於 768px，就會變水藍色** ```css .box { width: 200px; height: 200px; background-color: pink; } @media screen and (min-width: 768px) { .box { background-color: aqua; } } ``` #### 製作手機 & 電腦的畫面 - 手機，寬度<375px，margin：20px - PC，寬度>375px，margin:30px - 先計算尺寸 ```css phone total-width:375px contain-width:167.5px;百分比44.6666667% mid-margin:20px;5.3333% left&right-margin:10px;2.666667%（非必要） pc web total-width:1200px contain-width:210px;ratio:17.5% mid-margin:30px;ratio:2.5% left&right-margin:15px;ratio:1.25%(非必要) ``` - 先寫父層，不寫百分比就是 100% ```css /* css */ <style> .box { display: flex; flex-wrap: wrap; max-width: 1200px; margin: auto; } .col { /* width: calc(100% / 2 -20px); */ /*亦可用算數計算 */ width: 44.66666%; height: 100px; background-color: pink; margin: 10px 2.6666%; } @media screen and (min-width: 768px) { .col { /* width: calc(100% / 5 -30px); */ /* 亦可用算數計算 */ width: 17.5%; margin: 10px 1.25%; } } </style> ``` - 使用--column ```css <style> /* 最小的裝置設定 */ :root { --column-count: 2; --column-gap: 10px; } .box { display: flex; flex-wrap: wrap; max-width: 1200px; margin: auto; } .col { width: calc(100% / var(--column-count) - var(--column-gap) * 2); height: 100px; background-color: pink; margin: 10px var(--column-gap); } @media screen and (min-width: 768px) { .col { --column-gap: 15px; --column-count: 6; } } </style> ``` ```css /* html */ <body> <div class="box"> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> </body> ``` ### 裝置尺寸 ### 媒體查詢寫法 & 斷點 ![02-5](https://hackmd.io/_uploads/r1d7Nne4a.png) 1. 手機:width<768 2. 平板直:width>768 3. 平板橫:width>1024 4. 桌機:width>1200 5. 桌機:width>1440 - 將 CSS 寫成斷點 ![2-6](https://hackmd.io/_uploads/rJ7VV2eVp.png) ```css @media screen and (min-width: 768px) { .col { --column-gap: 15px; --column-count: 3; } } ``` ![2-7](https://hackmd.io/_uploads/By2N4hlNT.png) ```css @media screen and (min-width: 1024px) { .col { --column-count: 5; } } ``` ![2-8](https://hackmd.io/_uploads/HklHN2eVp.png) ```css @media screen and (min-width: 1200px) { .col { --column-count: 6; } } ``` ![2-9](https://hackmd.io/_uploads/rJXSV3eVT.png) ```css @media screen and (min-width: 1440px) { .col { --column-count: 7; } } ``` ### media 的另外一種寫法 - 由小到大 ```css /* 大於或等於時產生作用*/ @media screen and (min-width: 768px) { } @media screen and (min-width: 767px) { } ``` - 由大到小 ```css /* 小於或等於時產生作用*/ @media screen and (max-width: 1199px) { } @media screen and (max-width: 1023px) { } @media screen and (max-width: 767px) { } ``` - 第三種寫法(由小到大) ```css @media screen and (width >= 768px) { } ``` - 僅限平板能看到（設定限定最小寬度＆最大寬度） ```css @media screen and (min-width: 768 px) and (max-width: 1023px) { } /* 或寫成以下 */ @media screen and (768px < width < 1024px) { } ``` ### 格線系統 - 欄位常見欄數：1,2,3,4,6，取最小公倍數：12，可以先把畫面預設分割成 12 等份 - 一般分欄位的寫法 ![04-1](https://hackmd.io/_uploads/S1jS4hgNp.png) ```css <style> .wrap { display: flex; flex-wrap: wrap; } .col { width: 33.333333%; box-sizing: border-box; padding: 0 5px; } .card img { width: 100%; } </style> ``` ```css /* html */ <body> <div class="wrap"> <div class="col"> <div class="card"> <img src="https://fakeimg.pl/300x200/200" alt="" /> </div> </div> <div class="col"> <div class="card"> <img src="https://fakeimg.pl/300x200/200" alt="" /> </div> </div> <div class="col"> <div class="card"> <img src="https://fakeimg.pl/300x200/200" alt="" /> </div> </div> <div class="col"> <div class="card"> <img src="https://fakeimg.pl/300x200/200" alt="" /> </div> </div> </div> </body> ``` - 分成 12 等份，每份是 8.33333 - `[class*="col-"] {}`選取器名稱有任何一字串等於""內的字，就會套用 - 詳細內容請看老師檔案 day08-09.html ```css [class*="col-"] { box-sizing: border-box; padding: 0 10px; } ``` - 選取 class 內含"col-"的東西 使用snippet，可以自己定義 https://snippet-generator.app/ ![05](https://hackmd.io/_uploads/Sk4LN3xE6.png) ### 不等寬狀況，使用 row 排 參考老師檔案：day08 > 10.html ### 文圖並排 參考老師檔案：day8 > 11.html