---
# System prepended metadata

title: Journal of Learning Web Design
tags: [Tag(Web design blogs for beginners), Tag(初學者學習網頁程式語言日誌)]

---


<meta   property="fb:pages"   content="406509246127219"   />

### 初學者學習網頁程式語言日誌
# Journal of Learning Web Design

###### tags: `Tag(Web design blogs for beginners)` `Tag(初學者學習網頁程式語言日誌)`

:::info
:bulb:**A Little Progress Each Day Adds Up To Big Results 豐碩的成果是由每一天的小前進累積起來的!!!.
:::
---
## 😎  Intentions

- [ ] 何謂 Responsive Web Design (RWD) 響應式網頁設計
- [ ] 學習RWD - 伸縮自如的RWD 排版術
- [ ] 善用 Media Queries 
- [ ] 理解CSS權重的用法

## 📑 Happenings

**RWD 響應式網頁設計 (Responsive Web Design)**，目的是希望網頁或是 web app 在各種不同裝置上都可以提供使用者最佳的體驗和友善的閱讀介面。 

RWD 網頁的特性是「綁寬度不綁高度」，且通常是用塊狀模組去建置，因設計時必須考量到移動裝置如筆電、平板、手機等，網頁會依不同螢幕尺寸來改變編排，如縮小、移動、改變或是隱藏某些內容。此網頁製作方式，可讓各螢幕尺寸上顯示都可以更容易變化。

開發RWD網站通常有兩種，使用RWD 『框架工具』或『手工切版』。套用現成模版設計方便，缺點是架構不會調整就無法提昇速度，不易優化SEO。手切RWD網站使用 HTML & CSS 編寫，程式碼精簡、可控制，通常也具備SEO架構能被索引的內容，易於隨時優化SEO。

搜尋引擎友善的網頁，使用HTML文字給搜尋引擎抓取最佳化。SEO三大排名因素：『網站結構、網站內容、和外部連結』，而RWD響應式網頁設計通常有桌機、平板、手機三種版本內容網站整合，只要做好架構優化就具備SEO排名的能力。

### 優點：
- [ ] 網站可以被各種族群閱讀
- [ ] 開發成本低及製作時間短
- [ ] 利行動版網站索引和網站排名
- [ ] 易隨時提升網站版面架構最佳化
- [ ] 不同網址流量不會分散影響SEO
- [ ] 內容網站整合和上線後維護方便
---

## 😇  Grateful for

> The ability to learn something new 學習新東西的能力!!!

---


## 👩‍💻  Action items

### <font color="#1E5578">RWD 網頁設計基本設定和用法</font>

:::info
:bulb: **Hint: 設定 viewport :** 響應式網頁設計需有viewport 設定，它表指示瀏覽器如何控制網頁的大小和縮放.
:::
- <html>的<head>區快內需有 meta 定義 viewport，指示瀏覽器控制網頁的大小和縮放。
- meta 如無定義 viewport，瀏覽器會自行定義給予預設值，不同裝置無法正常顯示寬度。
- 設定好 viewport，CSS media query breakpoint 也能運作正常，範例如下:

```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
// 指定螢幕寬度為裝置寬度，畫面載入初始縮放比例 100%
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
</html>
```

> <font color="#1E2878">//指定螢幕寬度為裝置寬度，畫面載入初始縮放比例 100%，如<meta name="viewport" content="width=device-width, initial-scale=1.0"></font>

---

:::info
:bulb: **Hint: 決定 RWD 設計排版模式：** 網頁內容在不同 viewport 下的版面如何配置後的視覺＆資訊呈現。
:::

**RWD 中有五種比較常見的設計模式：**
- 局部流動 (mostly fluid)
- 欄內容下排 (column drop)
- 版面配置位移 (layout shifter)
- 細微調整 (tiny tweaks) 適用於單欄版面配置，例如單網頁線性網站、大量文字 的文章。
- 畫布外空間利用 (off canvas)。
---

:::info
:bulb: **Hint: 套用 media query語法：** 設定不同螢幕寬度做樣式版型調整，讓圖片/字體大小、容器寬高等，在各種螢幕尺寸下符合期待的樣式。
:::

### Media Query 使用方式有下列三種
- **<font color="#50A8DF">HTML 內使用 :</font> 如在 html 裡加入下面的程式碼，在視窗 screen 時會使用 style.css，列印時則使用 print.css**

```htmlembedded=
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">
```
- **<font color="#50A8DF">CSS 內使用 :</font> 直接寫在 CSS 裡的樣式。**
```css=
＠media screen{
  樣式...
}
@media print{
  樣式...
}
```
- **<font color="#50A8DF">CSS 內使用@import :</font> @import 可根據不同的 media 特性，import 不同的 css。**

```css=
import "style.css";
@import "print.css" print;
```

### CSS Media Queries 使用方式： or、and、not 和 only 四種，註：or 需加上逗號『，』。範例如下:

:::info
:pushpin: **<font color="#50A8DF">OR 應用範例 1 :</font>** 

@media (max-width:400px) 螢幕尺存小於等於 400px 『OR』印刷時，字體會變成粉色200px，反之就是黑色 30px。
```css=
 h1{
      font-size:30px;
  }
  @media (max-width:400px), print{
      h1{
          font-size:200px;
          color:Pink;
      }
  }
```

:pushpin: **<font color="#50A8DF">OR 應用範例 2 :</font>** 

@media 透過 (orientation: portrait) 判斷裝置是直立或橫放，如果裝置是直立『OR』寬度小於 300px，就讓文字變成藍色 150px。
```css=
h1{
      font-size:30px;
  }
  @media (max-width:400px), print{
      h1{
          font-size:200px;
          color:Pink;
      }
  }
```
:::

:::info
:pushpin: **<font color="#50A8DF"> AND 應用範例 1
</font>** 

使用 『AND』 必須要所有條件皆滿足，如『螢幕』大小介於『200px~300px』之間時，字體會是黃色 50px。
```css=
 h1{
      font-size:30px;
  }
  @media screen and (min-width:200px) and (max-width:300px){
      h1{
          font-size:50px;
          color:yellow;
      }
  }
```

:pushpin: **<font color="#50A8DF">AND 應用範例 2 :</font>** 

『AND』 和『OR』 可互相搭配使用，如『螢幕』大小介於『200px~300px』之間時，字體會是黃 50px，橫向印刷也會是黃色 50px 的字體。
```css=
h1{
      font-size:30px;
  }
  @media screen and (min-width:200px) and (max-width:300px), print and (orientation: landscape){
      h1{
          font-size:50px;
          color:yellow;
      }
  }
```
:::
:::info
:pushpin: **<font color="#50A8DF">ONLY 應用</font>** 

**『ONLY』** 通常用來指定 **『只有』** 某種特定裝置媒體才能套用的某些樣式，寫在 media query 的字首，目前已不常用因直接採用 AND 或 OR 的寫法就能夠符合絕大多數的需求。
:::

:::info
:pushpin: **<font color="#50A8DF"> ANOT 應用範例 </font>** 

**『NOT』** 通常用來 **『排除』** 某些裝置媒體才能套用的某些樣式，寫在 media query 的字首，用逗號分隔就能做出不同的判斷，如除了螢幕寬度小於等於 300px **『OR』** 印刷時為橫向才會出現綠色150px的字體。

```css=
 h1{
      font-size:30px;
  }
  @media not screen and (max-width:300px), print and (orientation: landscape){
      h1{
          font-size:50px;
          color:green;
      }
  }
```
**註：** NOT 和 ONLY 後方都必須先接 media type ( screen 或 print )才會有作用。

:::
---
:::info
:bulb: **Hint: 使用相對單位設定寬高、大小：** 內容的寬高、大小，建議使用「相對單位」來設定 讓在該範圍的 viewport 中達到最好的效果。

- 「相對單位」如 width: 50%、width: 100vh、height: 80vh、font-size: 2em 等，
:::
---
:::info
:bulb: **Hint: 設定文字段落或容器區塊高度：** 固定高度會因瀏覽器文字設定大小不同，而造成兩行字疊在一起或字幕只顯示一半的問題，因此設計時需考量到如何避面。行距不要設固定px
- 行距不要設固定px
- 區塊不要設固定高度
- 適量使用 overflow : hidden 屬性
:::
---
### <font color="#1E5578">權重分數的比例及用法 : 先看權重分數加總，再看先後順序</font>
- 相同權重但是後寫的 css 可以覆蓋之前寫的 css
- 當兩個選擇器同時作用在一個元素，權重高的優先生效

:::info
:bulb: **Hint: 權重高到低：** 
!important > inline style > ID > Class/psuedo-class (偽類) /attribute（屬性選擇器）> Element > *
:::

#### <font color="#1E5578"> 0\. 全局樣式 ～ 0分 </font>
**權重 0.0.0.0** ~ 通配符『 \* 』匹配任何元素因此權重為 0
```css=
/* 全站預設值 */
* { 
padding: 0;
margin: 0;
}
```
#### <font color="#1E5578"> 1\. HTML 標籤 ～ 1分 </font>
**權重 0.0.0.1** ~ 『元素選擇器(tagName)』 | 『偽元素(::pseudo-element)』

> 常見有：div, p, ul, ol, li, em, header, footer, article....

#### <font color="#1E5578"> 2\. CSS 類別選擇器 ～ 10分 </font>
**權重 0.0.0.1** ~ 『class 選擇器(.className)』 | 『屬性選擇器(\[attr="value"\]) 』| 『偽類(:pseudo-class)』

- **class 選擇器(.className)**
> class 在 html 寫 class="box" ，在 css 內標示<font color="red">『 . 』</font> 如 『.box』 。

- **psuedo-class(偽類)，如：**
> \[type:checkbox\]、\[attr\] 等。

- **attribute（屬性選擇器），如：**
> :nth-child() 、 :link 、 :hover 、 :focus 、:only-of-type 、 :nth-of-type 等。
:::info
:bulb: **範例**
- ul>li 都是 element 所以加起來是 0-0-0-2 
- body div ul li a span 總共 6 個 element，加起來是 0-0-0-6 
- li.myclass 一個 element 加上一個 class ，加起來是 0-0-1-1 
- li.myclass ~ li 兩個 element 加上一個 class ，加起來是 0-0-1-2 
- form input\[type=email\] 兩個 element 、一個 attribute，加起來是 0-0-1-2
:::

#### <font color="#1E5578"> 3\. id 選擇器 ～ 100分 </font>
**權重 0.1.0.0** ~ ID 選擇器 (#idName)
> id 在 html 寫 id="home" ，在 css 內標示<font color="red">『#』</font> ，如『#home』 。

#### <font color="#1E5578"> 4\. style element ~ 1000分 </font>
**權重 1.0.0.0** ~ 內聯樣式(inline)(style="...")，inline style attribute 就是寫在 html 行內的 style
```htmlembedded=
<div style="color:red"\> CSS Specificity </div>
```
#### <font color="#1E5578"> 5\. !important 10000分 </font>
**權重 1.0.0.0.0** ~ 屬於較特殊的等級擁有最高的優先級，會覆蓋所有其他四種等級的選擇器類型，用法如下：
```css=
div { 
display: block !important; 
}
```
:::info
:pushpin: **注意: <font color="red"> 只有 !important 能超越 !important!!!</font>**
:::
用 **!important** 來覆蓋優先級是 **<font color="red">強烈不推薦的</font>** ，因往後想要覆蓋屬性的時候也必須加上 **!important**，會強烈破壞樣式結構和可讀性。
```css=
.box{ 
      background-color: #f00 !important; 
      } 
.box{ 
      background-color: #aaa !important;
      }

```



```
```
# Journal of Learning Web Design
- Table of Content
[ToC]


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