# 十二、接下來，你還可以學什麼？

## 12-84 響應式網頁設計（Responsive Web Design）

可以兼容瀏覽器，是使用 CSS 的技巧實現

* [ 響應式網頁設計 教學 - YouTube](https://www.youtube.com/watch?v=WDVdmlb9zaY)
* [gonsakon/Responsive-boilerplate ](https://github.com/gonsakon/Responsive-boilerplate)  範例程式碼，自適應樣本

網頁寬度 = 裝置寬度

```markup
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
```

當裝置寬度最大寬度只有到某個值時，那就套用某些CSS設定

```css
/* ipad 直式 */
/* 768 是預設寬度 */
/* 767 可能是想螢幕有縮放時，修改版型 */
@media only screen and (max-width: 767px){
    .product_list li {
        background: #000;
    }
}

/* 手機 */
/* 可以只留 @media 就好 */
@media only screen and (max-width: 320){
    .wrap {
        width: 32px;
    }
    .product_list li {
        background: yellow;
    }
}
```

### news sample

三欄式版型

* 寬度用趴數，
* .wrap 用 max-width

```css
.wrap {
    max-width: 960px;
    padding-top: 20px;
    margin: 0 auto;
    line-light: 1.5;
}

.news li {
    width: 31.33333%;
    margin-right: 1%;
    margin-left: 1%;
    margin-bottom: 1em;
    float: left;
}

@media (max-width: 768px){
    .news li {
        width: 48%;
    }
}

/* iphone5 橫式 569 */
@media (max-width: 569px){
    .news li {
        width: 98%;
    }
}
```

### imgFloat

讓圖片能跟著自適應

* 圖片寬度用啪樹，或 max-width
* img 的 css reset，八五趴人會用

```css
/* 圖片的 css reset */
img {
    max-width: 100%;
    hieght: auto;
}

img {
    padding: 10px;
    border: 2px solid gray;
    margin-right: 10px;
    margin-bottom: 0px;
}

@media (max-width: 480px){
    width: 50%;
    /* 也可以寫 max-width: 500px; */
    padding: 5px;
    border: 1px solid gray;
    margin-right: 0px;
}
```

### menu-change

在 768 的時候，讓多欄選單變成單欄選單

```css
li {
    float: left;
    background: green;
    border-right: 1px solid #fff;
}

/* 單欄 */
@media (max-width: 767px){
    width: 90%;
    float: none;
    margin: 0 auto 10px auto;
    border-radius: 3px;
}

/* 雙欄 */
@media (max-width: 767px){
    width: 45%;
    float: left;
    margin: 0 auto 10px auto;
    border-radius: 3px;
}
```

### menu-hide

用手機時，不是所有東西都要擠進去

```css
@media (max-width: 480px){
    .other_side {
        display: none;
    }
}
```

### layout

如何讓原先在 pc 版面下使用絕對定位的 logo，在手機版面可以自適應

讓 pc 下內容與側欄的左右排版，在手機版時側欄掉下去

```css
.logo {
    position: absolute;
    top: 30px;
    left: 0px;
}
.logo a {
    display: block;
    width: 250px;
    text-indent: -99999px;
    height: 250px;
    background: url(../image/M1.png)
}

@media (max-width: 768px){
    .logo {
        position: relative;
        margin: 0 auto;
        width: 150px;
    }
    .logo {
        display: block;
        width: 150px;
        height: 170px;
        background: url(../images/M2.png) no-repeat;
    }
}
```

## 12-85 如何從網路上找到適合自己的學習教材

### 關鍵字搜尋技巧

* jquery 教學
* 加双引號，文字不會斷掉 "jquery" "教學"
* filetype:pdf，尋找特定檔案類型的連結

### 找「自己看得懂」的教學文章

* w3c，但像字典，枯燥乏味
* 找 blog，可以看文筆，找看的順眼的
* google 找前幾筆好讀的文章，例如 css float 範例

### 永遠抱持猜測態度，不要盡信

* 例如，找 jquery lightbox 效果
* 看排序(熱度)，以及文章發表日期
* 搜尋工具，查過去一年
* 不限語言 -> 中文

### Youtube 也是很好的搜尋管道

* jquery

### 圖片搜尋也是很好管道

* coffee templete
* 想找日本版型，把單字轉成日文，再圖片搜尋

### 搜尋別人在 Github 寫的程式碼

* css hover
* 用 github 有兩個動機
* 找套件。找 star 多的
* 學習時，找跟自己程度差不多的程式碼
  * angular todolist demo，找星星數少的
* 初學時，需要 api、文件一個一個慢慢學嗎？
* 可以看 sample

### 寫一份自學文件或資源連結區

* 學新技術，習慣用 hackpad 開專欄
  * 自己的 todolist
  * 自己的字典
* 資源分類
  * 程式字典
  * 蒐集的 Blog 文章
  * 學習 todolist，瞭解有哪些原理還要再多找資源補充

### 都搜尋不到，也卡關了，怎麼辦？（這招超有用）

站起來動一動

持續培養自己 Google 的能力，讓你能蓋在短時間內成為自學達人 希望大家都能成為 Google 工程師 (咦)

## 12-86 網頁關鍵字速記表

* <https://drive.google.com/file/d/0B2e3VLlpmcU4aTlhdlhzTGgzVUE/view>

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ayugioh2003.gitbook.io/html-css-learning/shi-er-3001-jie-xia-lai-ff0c-ni-huan-ke-yi-xue-shi-me-ff1f.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.