切版前需要思考的問題:
- 找 Basic HTML5 Template 模板來使用。
```html=
<!DOCTYPE html>
</body>
</html>
3. 使用 meta rwd: 讓網頁不會自動因手機螢幕變小而扭曲,使得RWD網頁能正常執行。[參考來源](https://pjchender.blogspot.com/2015/05/rwd.html)
```html=
<meta name="viewport" content="width=device-width, initial-scale=1">
- 使用 Normalize.css 讓 css 標準化後在不同瀏覽器上看到格式比較統一。
最後是這樣<link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
```html=
<!DOCTYPE html>
</html>
4. 設定用來方便 debug 的框線,這樣可以看得清楚所有元素之間的位置大小關係。以及設定初始字體大小、消除預設的 margin 與 padding。
```css=
.debug *, .debug {
outline: 1px solid gold;
}
html {
font-size: 12px;
}
html {
margin: 0px;
padding: 0px;
}
- 首先開一個包住目前要切的範圍的
<div class="wrapper">
,之後每個區塊都可以包wrapper
來確保格式統一,然後再往下切更細的區塊。