---
title: RWD for Stat Class04
tags: RWD
---
> 【目次】
> [TOC]
>
> Reference Website：
> 1. [網站技術發展史](http://jaceju.net/2012-11-21-webdev-history/)
> 2. [色碼表](https://www.toodoo.com/db/color.html)
> 3. [CSS 語法教學](https://www.1keydata.com/css-tutorial/tw/)
> 4. [CSS Diner：CSS selectors practice](http://flukeout.github.io/)
---
# **12/4 Class04 RWD**
## What is RWD？
* [Responsive Web Design (響應式網頁設計)](https://www.ibest.tw/page01.php)
* ==隨著裝置大小，改變其排版以適合該裝置使用==
* 目前使用 CSS3，以 % 的方式以及彈性的畫面設計，在不同解析度下改變網頁頁面的佈局排版，讓不同的設備都可以正常瀏覽同一網站，提供最佳的視覺體驗。
## 如何製作 RWD 網站? (必備四元素)
### 1. [Viewport](https://ithelp.ithome.com.tw/articles/10195279)
* 使用meta標籤設定網頁寬度符合裝置大小
```htmlmixed=
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- initial-scale=1.0 設定畫面的初始縮放比例為100% -->
</head>
```
### 2. Grid-View
* [將一個頁面分成12等份，方便做版面規劃。](
https://www.w3schools.com/css/tryresponsive_grid.htm)
### 3. 所有圖片按照螢幕寬度自動縮放
```css=
img {
max-width: 100%; /* 不會縮放到 "大於"其原始大小 */
height: auto; /* 隨著寬度等比例縮放 */
}
```
```htmlmixed=
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#img1 {
width: 100%;
height: auto;
}
#img2 {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img id="img1" src="img_chania.jpg" width="460" height="345">
<img id="img2" src="img_chania.jpg" width="460" height="345">
</body>
</html>
```
### 4. 給予個別device，個別的CSS規則 ([css media query](https://www.w3schools.com/css/css_rwd_mediaqueries.asp))
* Use CSS media queries to apply different styling for small and large screens. ==設計時，盡量用 %，而非 px。==
* 擺放位置：
```htmlmixed=
<head>
<style> Media Query 放這裡！</style>
</head>
```
* Add a Breakpoint
```css=
/* 正常情況下的p font-size */
p{
font-size: 14px;
}
```
```css=
/* 當裝置寬度最大為800px時(小於等於800px) */
@media(max-width: 700px){
p{
font-size: 100px;
}
}
```
* 常用的 devices size
1. Extra small devices (phones, 600px and down)
```@media only screen and (max-width: 600px) {...} ```
2. Medium devices (tablets and large phones, 600px and up)
```@media only screen and (min-width: 600px) {...} ```
3. Large devices (laptops/desktops, 992px and up)
```@media only screen and (min-width: 992px) {...} ```
## **實作開始** --純手工做一個 RWD 網頁
* 原始網頁(尚未加入 RWD)
<iframe height='500' scrolling='no' title='原始網頁(尚未加入 RWD)' src='//codepen.io/bessyhuang/embed/oQeoPq/?height=265&theme-id=0&default-tab=css,result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/bessyhuang/pen/oQeoPq/'>原始網頁(尚未加入 RWD)</a> by bessyhuang (<a href='https://codepen.io/bessyhuang'>@bessyhuang</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
1. 先把網頁內容全部擺上
```htmlmixed=
<div class="header">
<h1></h1>
</div>
<div class="row"><!--row start-->
<div class="col-3 col-s-3 menu">
</div>
<div class="col-5 col-s-9">
</div>
<div class="col-4 col-s-12 aside">
<img src="" style="width:100%;">
</div>
</div><!--row end-->
<div class="footer">
<p></p>
</div>
```
```css=
body{
margin:0px;
}
.header {
background-color: orange;
color: white;
padding: 15px;
}
.menu ul {
list-style-type: none; /* 去掉項目符號 */
margin: 0px;
padding: 0px;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: white;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.footer {
background-color: green;
color: white;
text-align: center;
font-size: 16px;
padding: 5px;
}
```
:::warning
==[box-sizing 屬性的設定值](https://www.webdesigns.com.tw/CSS_box-sizing.asp)==
* content-box： --向外擴 (default)
* 實際寬高＝所設定的數值＋border＋padding
* border-box： --向內縮
* 實際寬高＝所設定的數值(已包含border和padding)
<br>
```css=
* {
box-sizing: border-box;
font-family: Microsoft JhengHei;
}
```
:::
2. 把viewport加到<head></head>裡
```<meta name="viewport" content="width=device-width, initial-scale=1.0">```
3. float & % 的概念帶入
:::success
==[float 屬性：Used for positioning and layout on web pages.](http://www.flycan.com/article/css/css-float-442.html)==
* left - 從左開始浮動
* right - 從右開始浮動
<br>
```css=
[class*="col-"] {
float: left;
padding: 15px;
width: 100%; /* For mobile: 0px ~ 600px */
}
@media only screen and (min-width: 600px) {
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
```
:::
:::info
```css=
.row::after { /* ::after 偽元素*/
content: ""; /*欲插入的""內容接續在.row後面*/
clear: both; /*左右兩側均不允許浮動元素。*/
display: block; /* 會換行 (.row以後的東西換到下面去)*/
}
```
* ```::after``` selector inserts something after the content of each selected element(s).
* ```::before``` selector to insert something before the content.
* ```::before```、```::after``` 兩者都是以 display: inline-block 的屬性存在
<br>
:::
## **RWD 完成~**
<iframe height='500' scrolling='no' title='我的 RWD 範例' src='//codepen.io/bessyhuang/embed/Xyazej/?height=265&theme-id=0&default-tab=css,result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/bessyhuang/pen/Xyazej/'>我的 RWD 範例</a> by bessyhuang (<a href='https://codepen.io/bessyhuang'>@bessyhuang</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
* 將head內的style提出來放```css_style.css```
```htmlmixed=
<link rel="stylesheet" type="text/css" href="css_style.css">
```
Sign in with Wallet
Connect another wallet