--- tags: rwd --- # 伸縮自如的 RWD 排版術(上)(下) [伸縮自如的 RWD 排版術(上)](https://www.youtube.com/watch?v=t13Fvg0_xHk&t=810s) [伸縮自如的 RWD 排版術(下)](https://www.youtube.com/watch?v=Du_N0Vyh-Q0&t=1344s) ### 基本環境建立viweport 將響應式中繼標籤加到<head>中 ``` HTML <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> ``` 螢幕解析度顯示寬度=裝置寬度 device-width畫面寬度 user-scalable 使用者是否可以縮放 initial-scale 初始縮放比 maximum-scale 最大可縮放比 minimum-scale 最小可縮放比 ### Media Query 依不同斷點將語法加到 CSS，@media需按順序寫手機到桌機或桌機到手機， 以熱門斷點做設計最多3-4個斷點即可，也可以客戶使用的尺寸下去做斷點設計。 1.手機寬度375或414，也可設定 767px 直接將 767px 以下視為手機版型 2.ipad 768 3.bootstrap 1140 1200 ``` /*在 iPad 直式下變更樣式*/ @media(max-width:768px){...} /*在 iPhone11 直式下變更樣式 */ @media(max-width: 375px){...} ``` ### CSS 權重 先看權重再看順序，同樣權重時，css順序後者蓋掉前者(20:06) 1. html標籤1分 2. css類別選擇器10分 3. id 選擇器100分: id通常是用在錨點或是後端工程師寫 Javascript 時可能會用到，寫 CSS 樣式不需要用 id，覆蓋不容易 4. element(行內style)1000分: banner或輪播可能會用到style background 或 Javascript 可能會用到，一般不直接寫在行內style 5. ！important 一萬分 ##### 如果有前人的爛code，可找到相同位置的下方，用同權重寫法讓後者蓋前者，並且複製一個css檔，加到 <head> 原本 css link下方 ###### 或是你也做爛code增加後人的工作機會，太偉大了不要輕易嘗試XDD ### 避免網頁出現x軸 將最外圍設定max-width:1200px (尺寸依需求)，可自適應寬度最大1200px ``` /* 主體 CSS*/ /* 校長說網頁如果出現x軸他會把你釘到牆壁上哈 */ .container{ max-width: 1200px; margin: 0 auto; padding: 10px; } .header,.main,.footer{ margin-bottom: 50px; } ``` ### 建立圖片Reset 例如img原寬384,因下cssreset，父層寬度寫30%，寬度會跟父層li走，圖片自適應為300px ``` /* rwd img css，可當作是 CSS Reset 其中一個 */ img{ max-width: 100%; height: auto; } ``` ### 全域borderbix設定css(18:22) 若沒有偽元素可寫*就好 /* 全域 border box */ *,*::before,*::after{ box-sizing: border-box; } ### 外圍div container寫固定寬度max-width，內層用%寫 ``` /* 主體 CSS */ .container{ display: flex; width: 100px; margin: 0 auto; } .menu{ width: 30%; margin-right: 5%; background: orange; height: 100px; } .content{ width: 65%; background:blue; height: 100px; } ``` ### 其他 * 版型有很多種作法都可以做出來，找出自己的維護風格(45:12) * 設計開版尺寸可[參考bs的尺寸開版](https://bootstrap5.hexschool.com/docs/5.0/layout/grid/)，中間尺寸現在已經很少用960px，例如: 開版尺寸1920px、中間1280px、footer滿版，footer在設計稿應標示滿版，不寫死寬度width:1920px ### 圖片取代文字技巧 LOGO常用到圖片取代文字技巧，將文字隱藏起來主要是讓搜尋引擎也可以搜尋的到 ``` .logo a{ display:block; width:250px; height:250px; background:url(../images/M1.png); /* 圖片取代文字技巧 */ text-indent: 101%; white-space: nowrap; overflow: hidden; } ```