# 伸縮自如的RWD排版術
###### tags: `CSS` `RWD`
- [伸縮自如的 RWD 排版術(上)](https://youtu.be/t13Fvg0_xHk)
- [伸縮自如的 RWD 排版術(下)](https://youtu.be/Du_N0Vyh-Q0)

## :pushpin:開版
- 建議：內部1200
- header footer滿版會自適應螢幕解析度素不用+`width:100%`也不用制定width
- 較少使用960px
- [boostrap開版](https://bootstrap5.hexschool.com/docs/5.1/layout/grid/) max container width 1140px

## :pushpin:Media Query
HTML環境讓網頁能夠響應式
`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
- `width=device-width`強制變成裝置寬度
- `initial-scale=1.0`伸縮比為一倍

RWD使用@media依據載具尺寸更改CSS
需按順序寫手機到桌機或桌機到手機，以熱門斷點做設計最多3-4個斷點即可

- PC - 1200px
- iPad - 768px
- iPad以下 - 767px
- i6 Plus - 414px(視專案族群)
- i6 - 375px(視專案族群)
- i5、SE - 320px

/*768px時 裡面的樣式會被開啟並覆蓋原先的樣式*/
@media(max-width: 767px){...}

/*在 iPhone11 直式下變更樣式 */
@media(max-width: 375px){...}

## :memo:補充
- id可做錨點使用快速指向某個地方

<a href="#footer">連到表尾</a>
...
<footer ="footer"></footer>

- div區塊元素會自適應父層元素
- id取DOM getElementById()使用
- 靜態樣式不要寫TML style上，例:`<h1 style="color:red;"></h1>`
- 改前人code新增一個CSS並複製一樣的權重寫下更改內容，於HTML link放置在後覆蓋

## :pushpin: 避免網頁出現x軸
不寫死container寬度，使用`max-width`若大於其數值時不會放大，小於數值時會自適應到device寬度

/*div使用 x軸縮小時自適應*/
.container{
 max-width: 1200px;
 margin: 0 auto;
}

## :pushpin:CSS Reset
rwd img css，可當作是 CSS Reset 其中一個

/*img使用*/
.img{
    max-width:100%;
    height:auto;
}

全域border box

*,*::before,*::after{
  box-sizing: border-box;
}

## :pushpin:外層div固定寬度`max-width`，內層樣式使用`%`

/*外層*/
.container{
	display: flex;
	max-width: 1000px;
	margin: 0 auto;
}
/*內層*/
.menu{
	width: 30%; /*300px*/
	margin-right: 5%; /*50px*/
	background: orange;
	height: 100px;
}
.content{
	width: 65%;
	background:blue;
	height: 100px;
}