摘要：前端最基礎的就是。往期內容前端培訓初級階段前端培訓初級階段后記慣例補上主講人文章參考資料引用培訓目錄出處已備份到筆記字體生成原理及使用技巧查詢再聊移動端頁面的適配布局教程語法篇布局教程實例篇使用實現手淘頁面的終端適配

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，打牢基礎知識的中心思想，我們開課啦（每周四）。

Iconfont 字體圖標(阿里巴巴矢量字體圖標庫)原理以及實現
Media媒體響應式布局
Flex彈性盒子布局
移動端適配原理 rem（px、em、rem、%、vm）

使用 Media 做一個商品列表，800 以下的屏幕顯示兩列，其他屏幕 width: 200px，能放多少放多少

實現微信群組頭像（盡可能多使用幾種方法），avatar 和 border 都是不需要，我只是為了讓大家看的清楚。單詞居然寫錯了，還復制了好多次，還好我發現了。

實現文字和圖標混排，并盡可能多的顯示文字。（盡可能多的使用幾種方法）
1.文字極多，三圖標
2.文字極多，兩圖標
3.文字不多，兩圖標
4.文字不多，三圖標

使用 Iconfont 做一個微信下面導航

Iconfont是什么？
阿里媽媽MUX傾力打造的矢量圖標管理、交流平臺。設計師將圖標上傳到Iconfont平臺，用戶可以自定義下載多種格式的icon，平臺也可將圖標轉換為字體，便于前端工程師自由調整與調用。

Iconfont 地址

Iconfont 官方幫助中心

通過修改 @font-face 定義字體，然后替換元素的 font-family。（順便說句題外話，有些網頁防爬，服務端輸出數據1594，前端修改font-fmaily把 1594 對應到 5941，以此來達到看到的數據是對的，爬走的數據是假的。）

@font-face{font-family: "iconfont";
    src: url("iconfont.eot");
    src: url("iconfont.eot?#iefix") format("embedded-opentype"),
    url("iconfont.woff") format("woff"),
    url("iconfont.ttf") format("truetype"),
    url("iconfont.svg#iconfont") format("svg");
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}

3

unicode是字體在網頁端最原始的應用方式，特點是：

兼容性最好，支持ie6+，及所有現代瀏覽器。
支持按字體的方式去動態調整圖標大小，顏色等等。
但是因為是字體，所以不支持多色。只能使用平臺里單色的圖標，就算項目里有多色圖標也會自動去色。

font-class 是 unicode 使用方式的一種變種，主要是解決 unicode 書寫不直觀，語意不明確的問題。其實和上面相比就是把字符寫在 content: "e502"; 中。

@font-face {font-family: "iconfont";
  src: url("iconfont.eot?t=1552637571329"); /* IE9 */
  src: url("iconfont.eot?t=1552637571329#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("data:application/x-font-woff2;charset=utf-8;base64,") format("woff2"),
  url("iconfont.woff?t=1552637571329") format("woff"),
  url("iconfont.ttf?t=1552637571329") format("truetype"), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url("iconfont.svg?t=1552637571329#iconfont") format("svg"); /* iOS 4.1- */
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-h5-copy:before {
  content: "e502";
}

與unicode使用方式相比，具有如下特點：

兼容性良好，支持ie8+，及所有現代瀏覽器。
相比于unicode語意明確，書寫更直觀。可以很容易分辨這個icon是什么。
因為使用class來定義圖標，所以當要替換圖標時，只需要修改class里面的unicode引用。
不過因為本質上還是使用的字體，所以多色圖標還是不支持的。

這是一種全新的使用方式，應該說這才是未來的主流，也是平臺目前推薦的用法。這種用法其實是做了一個svg的集合，與上面兩種相比具有如下特點：

支持多色圖標了，不再受單色限制。
通過一些技巧，支持像字體那樣，通過font-size,color來調整樣式。
兼容性較差，支持 ie9+,及現代瀏覽器。
瀏覽器渲染svg的性能一般，還不如png。

選擇你所需要的，然后下載。看demo.html，里面有代碼。

使用 @media 查詢，可以針對媒體類型、屏幕尺寸來設置樣式。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。

語法

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

媒體類型（mediatype）

媒體特征（media feature）

測試頁面，常用的其實不多，主要就是判斷設備寬度。

// https://v4.bootcss.com/docs/4.0/layout/overview/#responsive-breakpoints
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Flex布局是什么？
2009年，W3C 提出了一種新的方案—- Flex布局，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支持，這意味著，很快就能很安全的使用。Flex 是 Flexible Box 的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。

容器的屬性（父級）

項目的屬性（子集、子元素）

order 定義項目的排列順序。數值越小，排列越靠前，默認為0。（數值是有極限的，demo）

flex-grow 屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據的剩余空間將比其他項多一倍。

flex-shrink 定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。負值對該屬性無效。

flex-basis 定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。它可以設為跟width或height屬性一樣的值（比如350px），則項目將占據固定空間。

flex 屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。建議優先使用這個屬性，而不是多帶帶寫三個分離的屬性，因為瀏覽器會推算相關值。

align-self 屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。

注意，設為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。

移動端適配要解決的問題

各終端下的適配問題（寬度 640 750）

Retina屏的細節處理 （iOS）

如何解決問題

rem 基于 html 的 font-size。實時更新 font-size 和屏幕寬度成比例，基于屏幕寬度適配

其中又分為基于媒介查詢

@media screen and (min-width:350px){html{font-size:342%;}}
@media screen and (min-width:360px){html{font-size:351.5625%;}}
@media screen and (min-width:375px){html{font-size:366.2%;}}
@media screen and (min-width:384px){html{font-size:375%;}}
@media screen and (min-width:390px){html{font-size:380.859%;}}
@media screen and (min-width:410px){html{font-size:400%;}}
@media screen and (min-width:432px){ /* 魅族3 */html{font-size:421.875%;}}
@media screen and (min-width:480px){html{font-size:469%;}}
@media screen and (min-width:540px){html{font-size:527.34%;}}
@media screen and (min-width:640px){html{font-size: 625%;}}
@media screen and (min-width:768px){html{font-size: 750%;}}

基于寬度計算（設計稿為 640）*0.15625

Flexible 也就是我們常說的手淘H5頁面的終端適配方案

vw/vh/vmin/vmax 新單位，直接基于屏幕寬度適配

vw 代表寬度分為 100 份。

vh 代表屏幕高度分為 100 份。

vmin 代表寬高最小值分為 100 份。

vmax 代表寬高最大值分為 100 份。

基于媒介查詢做（太費事了）

合理的 viewport

上面說了那么多，其實還是有坑的，下面我們來說說適配有什么坑。

不知道大家做過那種 ppt 的頁面沒，劃來劃去動畫效果。寬高是沒有比例的。所以在一些屏幕特別長的機型上就露底了。一般來說解決方案就是垂直居中頁面了

手淘方案在新出的曲面屏上表現怪異。那是因為他這個方案有一個最大值，而曲面屏超過了這個極限值。解決方案呢兩個

vw

水平居中頁面咯。

前端培訓-初級階段（1 - 4）

前端培訓-初級階段（5 - 8）

慣例補上主講人文章

(引用) 培訓目錄出處-已備份到筆記

Iconfont字體生成原理及使用技巧

CSS3 @media 查詢 --runoob

再聊移動端頁面的適配

Flex 布局教程：語法篇 --ruanyifeng

Flex 布局教程：實例篇 --ruanyifeng

使用Flexible實現手淘H5頁面的終端適配 #17