---
# System prepended metadata

title: RWD for Stat Class04
tags: [RWD]

---

---
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，以 % 的方式以及彈性的畫面設計，在不同解析度下改變網頁頁面的佈局排版，讓不同的設備都可以正常瀏覽同一網站，提供最佳的視覺體驗。
![](https://i.imgur.com/A6eEaGW.png)

## 如何製作 RWD 網站? (必備四元素)
### 1. [Viewport](https://ithelp.ithome.com.tw/articles/10195279)
* 使用meta標籤設定網頁寬度符合裝置大小
![](https://i.imgur.com/P8S6vmB.png)
```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)

![](https://i.imgur.com/gvxoPLD.png)

### 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">
```
