摘要：前端最基礎(chǔ)的就是。往期內(nèi)容前端培訓(xùn)初級(jí)階段前端培訓(xùn)初級(jí)階段后記慣例補(bǔ)上主講人文章參考資料引用培訓(xùn)目錄出處已備份到筆記字體生成原理及使用技巧查詢?cè)倭囊苿?dòng)端頁(yè)面的適配布局教程語(yǔ)法篇布局教程實(shí)例篇使用實(shí)現(xiàn)手淘頁(yè)面的終端適配

前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識(shí)的中心思想，我們開課啦（每周四）。

Iconfont 字體圖標(biāo)(阿里巴巴矢量字體圖標(biāo)庫(kù))原理以及實(shí)現(xiàn)
Media媒體響應(yīng)式布局
Flex彈性盒子布局
移動(dòng)端適配原理 rem（px、em、rem、%、vm）

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

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

實(shí)現(xiàn)文字和圖標(biāo)混排，并盡可能多的顯示文字。（盡可能多的使用幾種方法）
1.文字極多，三圖標(biāo)
2.文字極多，兩圖標(biāo)
3.文字不多，兩圖標(biāo)
4.文字不多，三圖標(biāo)

使用 Iconfont 做一個(gè)微信下面導(dǎo)航

Iconfont是什么？
阿里媽媽MUX傾力打造的矢量圖標(biāo)管理、交流平臺(tái)。設(shè)計(jì)師將圖標(biāo)上傳到Iconfont平臺(tái)，用戶可以自定義下載多種格式的icon，平臺(tái)也可將圖標(biāo)轉(zhuǎn)換為字體，便于前端工程師自由調(diào)整與調(diào)用。

Iconfont 地址

Iconfont 官方幫助中心

通過(guò)修改 @font-face 定義字體，然后替換元素的 font-family。（順便說(shuō)句題外話，有些網(wǎng)頁(yè)防爬，服務(wù)端輸出數(shù)據(jù)1594，前端修改font-fmaily把 1594 對(duì)應(yīng)到 5941，以此來(lái)達(dá)到看到的數(shù)據(jù)是對(duì)的，爬走的數(shù)據(jù)是假的。）

@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是字體在網(wǎng)頁(yè)端最原始的應(yīng)用方式，特點(diǎn)是：

兼容性最好，支持ie6+，及所有現(xiàn)代瀏覽器。
支持按字體的方式去動(dòng)態(tài)調(diào)整圖標(biāo)大小，顏色等等。
但是因?yàn)槭亲煮w，所以不支持多色。只能使用平臺(tái)里單色的圖標(biāo)，就算項(xiàng)目里有多色圖標(biāo)也會(huì)自動(dòng)去色。

font-class 是 unicode 使用方式的一種變種，主要是解決 unicode 書寫不直觀，語(yǔ)意不明確的問題。其實(shí)和上面相比就是把字符寫在 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使用方式相比，具有如下特點(diǎn)：

兼容性良好，支持ie8+，及所有現(xiàn)代瀏覽器。
相比于unicode語(yǔ)意明確，書寫更直觀?？梢院苋菀追直孢@個(gè)icon是什么。
因?yàn)槭褂胏lass來(lái)定義圖標(biāo)，所以當(dāng)要替換圖標(biāo)時(shí)，只需要修改class里面的unicode引用。
不過(guò)因?yàn)楸举|(zhì)上還是使用的字體，所以多色圖標(biāo)還是不支持的。

這是一種全新的使用方式，應(yīng)該說(shuō)這才是未來(lái)的主流，也是平臺(tái)目前推薦的用法。這種用法其實(shí)是做了一個(gè)svg的集合，與上面兩種相比具有如下特點(diǎn)：

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

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

使用 @media 查詢，可以針對(duì)媒體類型、屏幕尺寸來(lái)設(shè)置樣式。當(dāng)你重置瀏覽器大小的過(guò)程中，頁(yè)面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁(yè)面。

語(yǔ)法

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

媒體類型（mediatype）

媒體特征（media feature）

測(cè)試頁(yè)面，常用的其實(shí)不多，主要就是判斷設(shè)備寬度。

// 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布局，可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局。目前，它已經(jīng)得到了所有瀏覽器的支持，這意味著，很快就能很安全的使用。Flex 是 Flexible Box 的縮寫，意為”彈性布局”，用來(lái)為盒狀模型提供最大的靈活性。

容器的屬性（父級(jí)）

項(xiàng)目的屬性（子集、子元素）

order 定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。（數(shù)值是有極限的，demo）

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

flex-shrink 定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時(shí)，都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1，則空間不足時(shí)，前者不縮小。負(fù)值對(duì)該屬性無(wú)效。

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

flex 屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。該屬性有兩個(gè)快捷值：auto (1 1 auto) 和 none (0 0 auto)。建議優(yōu)先使用這個(gè)屬性，而不是多帶帶寫三個(gè)分離的屬性，因?yàn)闉g覽器會(huì)推算相關(guān)值。

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

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

移動(dòng)端適配要解決的問題

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

Retina屏的細(xì)節(jié)處理 （iOS）

如何解決問題

rem 基于 html 的 font-size。實(shí)時(shí)更新 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%;}}

基于寬度計(jì)算（設(shè)計(jì)稿為 640）*0.15625

Flexible 也就是我們常說(shuō)的手淘H5頁(yè)面的終端適配方案

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

vw 代表寬度分為 100 份。

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

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

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

基于媒介查詢做（太費(fèi)事了）

合理的 viewport

上面說(shuō)了那么多，其實(shí)還是有坑的，下面我們來(lái)說(shuō)說(shuō)適配有什么坑。

不知道大家做過(guò)那種 ppt 的頁(yè)面沒，劃來(lái)劃去動(dòng)畫效果。寬高是沒有比例的。所以在一些屏幕特別長(zhǎng)的機(jī)型上就露底了。一般來(lái)說(shuō)解決方案就是垂直居中頁(yè)面了

手淘方案在新出的曲面屏上表現(xiàn)怪異。那是因?yàn)樗@個(gè)方案有一個(gè)最大值，而曲面屏超過(guò)了這個(gè)極限值。解決方案呢兩個(gè)

vw

水平居中頁(yè)面咯。

前端培訓(xùn)-初級(jí)階段（1 - 4）

前端培訓(xùn)-初級(jí)階段（5 - 8）

慣例補(bǔ)上主講人文章

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

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

CSS3 @media 查詢 --runoob

再聊移動(dòng)端頁(yè)面的適配

Flex 布局教程：語(yǔ)法篇 --ruanyifeng

Flex 布局教程：實(shí)例篇 --ruanyifeng

使用Flexible實(shí)現(xiàn)手淘H5頁(yè)面的終端適配 #17