前端培訓-初級階段（9 -12）

時間 2019-11-05

標籤前端培訓初級階段简体版

原文原文鏈接

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

咱們要講什麼

Iconfont 字體圖標(阿里巴巴矢量字體圖標庫)原理以及實現

Media媒體響應式佈局

Flex彈性盒子佈局

移動端適配原理 rem（px、em、rem、%、vm）

課後做業

使用 Media 作一個商品列表，800 如下的屏幕顯示兩列，其餘屏幕 width: 200px，能放多少放多少
實現微信羣組頭像（儘量多使用幾種方法），avatar 和 border 都是不須要，我只是爲了讓你們看的清楚。單詞竟然寫錯了，還複製了好屢次，還好我發現了。
實現文字和圖標混排，並儘量多的顯示文字。（儘量多的使用幾種方法）
1.文字極多，三圖標
2.文字極多，兩圖標
3.文字很少，兩圖標
4.文字很少，三圖標
使用 Iconfont 作一個微信下面導航

Iconfont 字體圖標(阿里巴巴矢量字體圖標庫)原理以及實現

Iconfont是什麼？
阿里媽媽MUX傾力打造的矢量圖標管理、交流平臺。設計師將圖標上傳到Iconfont平臺，用戶能夠自定義下載多種格式的icon，平臺也可將圖標轉換爲字體，便於前端工程師自由調整與調用。
Iconfont 地址
Iconfont 官方幫助中心

原理實現

1) unicode 引用

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

@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;}

<i class="iconfont">&#x33;</i>

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

兼容性最好，支持ie6+，及全部現代瀏覽器。

支持按字體的方式去動態調整圖標大小，顏色等等。

可是由於是字體，因此不支持多色。只能使用平臺裏單色的圖標，就算項目裏有多色圖標也會自動去色。

2) font-class 引用

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

@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使用方式相比，具備以下特色：git

兼容性良好，支持ie8+，及全部現代瀏覽器。

相比於unicode語意明確，書寫更直觀。能夠很容易分辨這個icon是什麼。

由於使用class來定義圖標，因此當要替換圖標時，只須要修改class裏面的unicode引用。

不過由於本質上仍是使用的字體，因此多色圖標仍是不支持的。

3) symbol 引用

這是一種全新的使用方式，應該說這纔是將來的主流，也是平臺目前推薦的用法。這種用法實際上是作了一個svg的集合，與上面兩種相比具備以下特色：github

支持多色圖標了，再也不受單色限制。

經過一些技巧，支持像字體那樣，經過font-size,color來調整樣式。

兼容性較差，支持 ie9+,及現代瀏覽器。

瀏覽器渲染svg的性能通常，還不如png。

如何使用？

選擇你所須要的，而後下載。看demo.html，裏面有代碼。web

Media媒體響應式佈局

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

語法segmentfault

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

媒體類型（mediatype）瀏覽器

值	描述
all	用於全部設備
print	用於打印機和打印預覽
screen	用於電腦屏幕，平板電腦，智能手機等
speech	應用於屏幕閱讀器等發聲設備

媒體特徵（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) { ... }

值	描述
device-height	定義輸出設備的屏幕可見高度
device-width	定義輸出設備的屏幕可見寬度
height	定義輸出設備中的頁面可見區域高度
width	定義輸出設備中的頁面可見區域寬度
max-device-height	定義輸出設備的屏幕可見的最大高度
max-device-width	定義輸出設備的屏幕最大可見寬度
max-height	定義輸出設備中的頁面最大可見區域高度
max-width	定義輸出設備中的頁面最大可見區域寬度
min-device-width	定義輸出設備的屏幕最小可見寬度
min-device-height	定義輸出設備的屏幕的最小可見高度
min-height	定義輸出設備中的頁面最小可見區域高度
min-width	定義輸出設備中的頁面最小可見區域寬度
orientation	定義輸出設備中的頁面可見區域高度是否大於或等於寬度

Flex彈性盒子佈局

Flex佈局是什麼？
2009年，W3C 提出了一種新的方案—- Flex佈局，能夠簡便、完整、響應式地實現各類頁面佈局。目前，它已經獲得了全部瀏覽器的支持，這意味着，很快就能很安全的使用。Flex 是 Flexible Box 的縮寫，意爲」彈性佈局」，用來爲盒狀模型提供最大的靈活性。

容器的屬性（父級）

屬性名	屬性值	默認值	描述
display	flex inline-flex	static	定義爲彈性盒子
flex-direction	row(主軸爲水平方向，起點在左端) row-reverse(主軸爲水平方向，起點在右端) column(主軸爲垂直方向，起點在上沿) column-reverse(主軸爲垂直方向，起點在下沿)	row	排列方向
flex-wrap	nowrap(不換行) wrap(換行，第一行在上方) wrap-reverse(換行，第一行在下方)	nowarp	內容放不下，如何換行
flex-flow	<flex-direction> <flex-wrap>	row nowarp	是flex-direction屬性和flex-wrap屬性的簡寫形式
justify-content	flex-start(左對齊) flex-end(右對齊) center(居中) space-between(兩端對齊) space-around(每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍);	flex-start	主軸上的對齊方式，默認來講就是水平對齊text-align
align-items	flex-start(頂部) flex-end(底部) center(居中) baseline(文字基線) stretch(垂直拉伸);	stretch	交叉軸對齊方式，默認來講就是垂直對齊vertical-align
align-content	flex-start(頂部) flex-end(底部) center(居中) space-between(軸線之間的間隔平均分佈) space-around(每根軸線兩側的間隔都相等) stretch(軸線佔滿整個交叉軸)	stretch	定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。

項目的屬性（子集、子元素）
1. order 定義項目的排列順序。數值越小，排列越靠前，默認爲0。（數值是有極限的，demo）
2. flex-grow 屬性定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大。若是全部項目的flex-grow屬性都爲1，則它們將等分剩餘空間（若是有的話）。若是一個項目的flex-grow屬性爲2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍。
3. flex-shrink 定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。若是全部項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。若是一個項目的flex-shrink屬性爲0，其餘項目都爲1，則空間不足時，前者不縮小。負值對該屬性無效。
4. flex-basis 定義了在分配多餘空間以前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小。它能夠設爲跟width或height屬性同樣的值（好比350px），則項目將佔據固定空間。
5. flex 屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。建議優先使用這個屬性，而不是單獨寫三個分離的屬性，由於瀏覽器會推算相關值。
6. align-self 屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。

注意，設爲Flex佈局之後，子元素的float、clear和vertical-align屬性將失效。

移動端適配原理 rem（px、em、rem、%、vm）

移動端適配要解決的問題
1. 各終端下的適配問題（寬度 640 750）
2. 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 新單位，直接基於屏幕寬度適配
1. vw 表明寬度分爲 100 份。
2. vh 表明屏幕高度分爲 100 份。
3. vmin 表明寬高最小值分爲 100 份。
4. vmax 表明寬高最大值分爲 100 份。
基於媒介查詢作（太費事了）

合理的 viewport

<!-- dpr = 1--> 
<meta name="viewport" content="initial-scale=scale,maximum-scale=scale,minimum-scale=scale,user-scalable=no"> 
<!-- dpr = 2--> 
<meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no"> 
<!-- dpr = 3--> 
<meta name="viewport" content="initial-scale=0.3333333333,maximum-scale=0.3333333333,minimum-scale=0.3333333333,user-scalable=no">

上面說了那麼多，其實仍是有坑的，下面咱們來講說適配有什麼坑。