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

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

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

網頁寬度 = 裝置寬度

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

當裝置寬度最大寬度只有到某個值時，那就套用某些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

.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 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 的時候，讓多欄選單變成單欄選單

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

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

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

layout

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

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

.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 網頁關鍵字速記表

Previous十一、開發多頁式實戰講解

Last updated