矢量小图标
一、阿里矢量圖標(字體圖標)
網址：https://www.iconfont.cn/
#### 1.使用步驟
1.登錄阿里矢量圖標網站
? 2.搜索想要的圖標且加到購物車
? 3.點擊右上角的購物車
? 4.選擇下載代碼，下載完成后解壓文件
? 5.把下載的文件放到你的項目中
? 6.引入iconfont.css文件或者iconfont.js文件
##### 使用三種方式：下載代碼
##### 1、Unicode 方式引用
Unicode 是字體在網頁端最原始的應用方式，特點是：
- 兼容性最好，支持 IE6+，及所有現代瀏覽器。
- 支持按字體的方式去動態調整圖標大小，顏色等等。
- 但是因為是字體，所以不支持多色。只能使用平臺里單色的圖標，就算項目里有多色圖標也會自動去色。
> 注意：新版 iconfont 支持多色圖標，這些多色圖標在 Unicode 模式下將不能使用，如果有需求建議使用symbol 的引用方式
使用步驟如下：
第一步：引入項目下面生成的 fontclass 代碼：
```css
<link rel="stylesheet" href="./iconfont.css">
```
第二步：挑選相應圖標并獲取字體編碼，應用于頁面
```html
<span class="iconfont">3</span>
```
##### 2、font-class 方式引用
font-class 是 Unicode 使用方式的一種變種，主要是解決 Unicode 書寫不直觀，語意不明確的問題。
與 Unicode 使用方式相比，具有如下特點：
- 兼容性良好，支持 IE8+，及所有現代瀏覽器。
- 相比于 Unicode 語意明確，書寫更直觀?？梢院苋菀追直孢@個 icon 是什么。
- 因為使用 class 來定義圖標，所以當要替換圖標時，只需要修改 class 里面的 Unicode 引用。
- 不過因為本質上還是使用的字體，所以多色圖標還是不支持的。
使用步驟如下：
第一步：引入項目下面生成的 fontclass 代碼：
```html
<link rel="stylesheet" href="./iconfont.css">
```
第二步：挑選相應圖標并獲取類名，應用于頁面：
```html
<span class="iconfont icon-xxx"></span>
```
> " iconfont" 是你項目下的 font-family?？梢酝ㄟ^編輯項目查看，默認是 "iconfont"。
##### 3、Symbol方式引用
這是一種全新的使用方式，應該說這才是未來的主流，也是平臺目前推薦的用法。相關介紹可以參考這篇[文章]() 這種用法其實是做了一個 SVG 的集合，與另外兩種相比具有如下特點：
- 支持多色圖標了，不再受單色限制。
- 通過一些技巧，支持像字體那樣，通過 `font-size`, `color` 來調整樣式。
- 兼容性較差，支持 IE9+，及現代瀏覽器。
- 瀏覽器渲染 SVG 的性能一般，還不如 png。
使用步驟如下：
第一步：引入項目下面生成的 symbol 代碼：
```html
<script src="./iconfont.js"></script>
```
第二步：加入通用 CSS 代碼（引入一次就行）：
```html
<style>
.icon {
? width: 1em;
? height: 1em;
? vertical-align: -0.15em;
? fill: currentColor;
? overflow: hidden;
}
//改變樣式
? ? .icon{
? ? ? ? width: 100px;
? ? ? ? height: 100px;
? ? ? ? font-size: 20px;
? ? ? ? display: block;
? ? }
</style>
```
第三步：挑選相應圖標并獲取類名，應用于頁面：
```html
<svg class="icon" aria-hidden="true">
? <use xlink:href="#icon-xxx"></use>
</svg>
```
#### 2.引入字體圖標第二種方式：添加至項目
```html
?項目引入：
? ? 1.選好圖標添加至項目
? ? 2.選擇要添加的項目（如果沒有項目點擊右上角新建項目），點擊確定
? ? 3.下載至本地
? ? 4.解壓文件，把文件放到代碼中
? ? 5.正常使用
? ? ?添加新的圖標
? ? ?1.把新的圖標選好之后，點擊添加項目，選擇你要添加的項目
? ? ?2.下載至本地
? ? 3.解壓文件，把文件放到代碼中(此時下載的這個文件包括上次選的圖標，也包括這次選的新的圖標)
? ? 4.正常使用
? ?添加新的圖標下載文件后，把原來的文件替換掉，再把iconfont.css和iconfont.js文件鏈接替換一下即可
? ? 與下載代碼的區別：
? ? 下載代碼：
? ? ? 如果添加新的圖標，需要再新下載一個文件，且這個文件的圖標與上個文件的圖標不能在一個文件中，是兩個獨立的文件
? ? 項目引入：
? ? ? 如果添加新的圖標，可以把這些圖標添加到已有的項目文件，這樣原來的圖標和這次新添加的圖標就可以在新的一個文件里了
```
?
# 移動端web開發
### 概述
隨著互聯網技術的快速發展，加之智能設備的迅速普及,傳統網站都已經逐漸向移動端轉移和擴展,移動端web開發技術的掌握也顯得尤為重要。
移動端Web主要指運行在移動端（手機、ipad）的web頁面, 因為具備HTML5特性也叫H5頁面、Web App等。
【H5頁面、微網頁、微站、wap站、webAPP】
如:京東商城手機版，淘寶觸屏版，蘇寧易購手機版
```
相關閱讀：
WebApp與Native App的區別？
在高端智能手機系統中有兩種應用程序：一種是基于本地(操作系統)運行的APP;一種是基于高端機的瀏覽器運行的WebApp（基于WEB形式的應用程序）
Native App：
1、開發成本非常大一般使用的開發語言為JAVA、C++、Objective-C
2.能調用系統的 api 優點是性能更好，實現的一些非常酷的交互效果,但是發布 app 流程繁瑣，而且不跨平臺。
3.更新體驗較差（每一次發布新的版本，都需要做版本打包，且需要用戶手動更新）
Web App：
1、開發成本較低
使用web開發技術就可以輕松的完成web app的開發
2、升級較簡單
升級不需要通知用戶，在服務端更新文件即可，用戶完全沒有感覺
3、維護比較輕松
和一般的web一樣，維護比較簡單
優點是跨平臺，修改方便缺點是不能調用原生的 api, 而且用戶體驗不如原生 app 好
```
## 移動端瀏覽器及內核
移動端瀏覽器：百度瀏覽器，火狐瀏覽器，谷歌瀏覽器，uc瀏覽器，360瀏覽器，qq瀏覽器，蘋果瀏覽器，獵豹瀏覽器，搜狗瀏覽器，2345瀏覽器等等
?國內用戶首選使用移動瀏覽器的占比中：uc瀏覽器，qq瀏覽器，360瀏覽器，為用戶手機瀏覽器平臺首先前三位
? 內核：
對于安卓手機而言，使用率最高的就是webkit內核，國內目前尚無自主研發的內核，都是基于開源內核webkit上進行的二次開發，并不是完全的自主內核
對于蘋果手機而言：由于系統封閉，不允許除蘋果系統自帶的瀏覽器內核以外的瀏覽器內核進入，因此各家瀏覽器的開發均在Safari內核的基礎上進行開發；
終端分為三個：pc ? iPad ?移動端
### 移動端web開發現狀
- 移動端瀏覽器大多基于webkit內核， 對H5+CSS3支持良好
- 手機的屏幕尺寸非常多，不同的移動設備有不同的屏幕尺寸、視口大小
? ```
? 設備的屏幕尺寸查詢: https://uiiiuiii.com/screen/ ?
? ```
我們開發的網頁，在不同的手機上，若想展示效果一致，必然不是為每一種型號手機都開發一套頁面，而是要盡可能的能適配所有
### 視口
了解視口相關概念及理想視口的設置 是移動Web開發非常重要環節。
#### 什么是視口？
- 視口簡單來說就是瀏覽器顯示頁面內容的區域。
- 視口：瀏覽器顯示內容的屏幕區域，相當于PC端瀏覽器可視區 (白板區域)
- 在PC端，正常的視口寬度就是整個瀏覽器的窗口可視區的寬度，會隨著瀏覽器窗口大小的重置而縮放；
#### 視覺視口
【視覺視口是指用戶當前看到區域】即設備寬度
#### 布局視口
移動設備的瀏覽器都默認設置 了一個viewport元標簽，定義了一個虛擬的布局視口，,CSS 布局將會根據它來進行計算，并被它約束。
一般來講，移動設備上的viewport都是要大于瀏覽器可視區域的，這是因為考慮到移動設備的分辨率相對于桌面電腦來說都比較小，所以為了能在移動設備上正常顯示那些傳統的為桌面瀏覽器設計的網站，移動設備上的瀏覽器都會把自己默認的viewport設為980px或1024px
所以PC上的網頁基本能在手機上呈現，只不過看上去很小，一般默認允許用戶通過手動縮放、平移來查看網頁。
?
不同設備大小也不相同由設備出廠設置決定，下圖列出了一些設備上瀏覽器的默認viewport的寬度。
布局視口的寬度/高度可以通過 document.documentElement.clientWidth / Height
如果要顯式設置布局視口，可以使用 HTML 中的 meta 標簽進行設置
#### 理想視口
布局視口對用戶不友好，基于理想視口設計的網站，不需要用戶手動縮放，也不需要出現橫向滾動條，網站的所有內容都可以正常的呈現給用戶。
為了網站的移動端能有更好的瀏覽器和閱讀而設置 （蘋果公司引入的理想視口的概念）
理想視口可以使用 HTML 中的 meta 標簽顯式設置布局視口等于設備寬度
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0, minimum-scale=1.0">
創建一個虛擬窗口，窗口寬度為設備寬，初始縮放比為1倍，同時不允許用戶手動縮放
content屬性：
? ? - width 虛擬窗口的屏幕寬度 device-width 設備寬
? ? - initial-scale 頁面初始縮放比
? ? - user-scalable 是否允許用戶手動縮放
? ? ? ? - user-scalable=no 不允許用戶手動縮放
? ? ? ? - user-scalable=yes 允許用戶手動縮放，默認值
? ? - maximum-scale 最大縮放比
? ? - minimum-scale 最小縮放比
?height : 設置viewport的高度（我們一般而言并不能用到 ）
常見的手機設置的大小
? ? iphone4/5/SE 320
? ? iphone6/7/8 375
? ? iphone6plus、 iphone7plus、 iphone8plus 414
```
屬性說明:
| width ? ? ? ? | 正整數或device-width ?| 定義視口的寬度，單位為像素 ? ? ? ? ? ? ? ? ? ? ? ? ?|
| ------------- | --------------------- | --------------------------------------------------- |
| height ? ? ? ?| 正整數或device-height | 定義視口的高度，單位為像素，一般不用 ? ? ? ? ? ? ? ?|
| initial-scale | [0.0-10.0] ? ? ? ? ? ?| 定義初始縮放比率 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?|
| minimum-scale | [0.0-10.0] ? ? ? ? ? ?| 定義最小縮放比例，它必須小于或等于maximum-scale設置 |
| maximum-scale | [0.0-10.0] ? ? ? ? ? ?| 定義最大縮放比例，它必須大于或等于minimum-scale設置 |
| user-scalable | yes （1）/ no（0） ? ?| 定義是否允許用戶手動縮放頁面，默認值 yes ? ? ? ? ? ?|
## 移動端布局方案
### 3.1 流式布局（寬度自適應）
流式布局是寬度使用百分比代替固定寬度px，高度大多使用px來固定，因此在大屏幕手機下顯示的效果會變成頁面元素的寬度被拉長，高度和原來保持一致
優點：
可以很好的來解決自適應的問題
缺點：
1、實際顯示的效果不友好,屏幕越大，寬度被拉的很長，容易變形
2、大量使用百分比布局，會出現兼容性問題
```html
? ? <style>
? ? ? ? * {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? }
? ? ? ? .box {
? ? ? ? ? ? width: 50%;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? background-color: pink;
? ? ? ? }
? ? ? ? img {
? ? ? ? ? ? width: 50%;
? ? ? ? ? ? height: 100px;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class="box"></div>
? ? <img src="./images/Koala.jpg" alt="">
</body>
```
### 3.2 rem布局
* rem是css3新增單位，它是相對于根元素的字號大小的單位
? rem原理：
? ? ? rem是指相對于根元素的字體大小的單位，即根據html元素的font-size來計算大小。
? ? ? ?在布局過程中只要使用 rem 設置元素的尺寸，在改變 rem 的基準值 html 的字體大小的時候，頁面上的元素將等比例縮放實現適配。
比如說 html 的 font-size 大小為 100px, 一個 div 的 width 為 1rem，則 div 的 width大小為100px
相對單位 : rem ?
```css
html {
? ? font-size:100px; //1rem = 100px
}
.box {
? ? width:2rem;// 2*100 = 200px
? ? height:3rem;//3*100 = 300px
? ? font-size:1rem;//1*100 = 100px
}
```
* rem布局的實現：
? ? ?1、設置頁面的viewport
? ? ?2.動態計算并設置不同尺寸html的font-size屬性
? ? ?3.按照PC端布局方式正常布局，將px單位改為rem單位（較小 的長度比如1px的邊框就不需要轉換成rem,直接設置px）
```js
// 1. 獲取當前屏幕的寬度
// 2. 獲取當前屏幕下html元素的字體大小;
// 3. 賦值
? 當前屏幕寬度字體基礎值html = 當前屏幕寬度*預設字體基礎值/psd設計稿的寬度;
? ? ? ?
? ? ? ? 320:當前屏幕寬度，設備寬度 ?deviceWidth
? ? ? ? 640：psd稿 ?desw
? ? ? ? 100：預設字體基礎值1rem=100px
? ? ? ? ?: 當前屏幕寬度字體的基礎值（html的font-size的值）currFontSize
? ? ? ? 320 ? ? ？
? ? ? ? —— ?= ?——
? ? ? ? 640 ? ? 100
? ? ? ? ？=(320*100)/640
? ? ? ? currFontSize=(deviceWidth*100)/desw
? ? ? ? // 封裝一個函數，這個函數的名字叫auto
? ? ? ? function auto() {
? ? ? ? ? ? // 獲取當前屏幕的寬度
? ? ? ? ? ? var deviceWidth = document.documentElement.clientWidth;
? ? ? ? ? ? // 打印當前屏幕的寬度
? ? ? ? ? ? console.log(deviceWidth);
? ? ? ? ? ? //psd設計稿的寬度 假如設計稿就是750px
? ? ? ? ? ? var desw = 750;
? ? ? ? ? ? //手機屏幕 大于 設置稿 ?,就按1:1的大小去做
? ? ? ? ? ? if (deviceWidth > desw) {
? ? ? ? ? ? ? ? deviceWidth = desw;
? ? ? ? ? ? }
? ? ? ? ? ? // 獲取當前屏幕寬度字體的基礎值
? ? ? ? ? ? var currFontSize = (deviceWidth * 100) / desw
? ? ? ? ?// 打印當前屏幕寬度html的font-size
? ? ? ? ? ? console.log(currFontSize);
? ? ? ? ? ? // 賦值 （給html設置font-size的值）
? ? ? ? ? ? document.documentElement.style.fontSize = currFontSize + 'px';
? ? ? ? ? ?
? ? ? ? ? ? // 表示獲取 html
? ? ? ? ? ? console.log(document.documentElement);
? ? ? ? }
? ? ? ? // 調用函數
? ? ? ? auto();
? ? ? ? //只要屏幕改變就調用auto函數
? ? ? ? window.onresize = function () {
? ? ? ? ? ? auto();
? ? ? ? }
```
* 優點：
1.適用于偏APP類型的移動端頁面
2.有利于手機端各種機型的適配
3.減少代碼的重復性
* 缺點：
1.必須通過js來動態控制根元素的字體大小
?```html
?在 Visual Studio Code 裝一個插件: px to rem
?文件--首選項--設置--搜索 px to rem --16改成100
?轉換px--rem或rem--px ?捷鍵：alt +z（選中要換算的代碼）
?```
### 3.3 vw布局
?使用純css實現動態改變font-size屬性值，不需要引用js文件
?- vw viewport's width ?是css3規范中寬度視口單位，將視口寬度平均分成100份
?- vh viewport's height 將視口高度平均分成100份
- 原理：確定基準值以常見的750像素寬度的設計稿為例，根據vw單位的原理100vw = 750px,即 1vw = 7.5px，根據設計稿中的px值，轉換成對應的vw值進行布局，也可以直接寫px
? 100vw ?= ?750px ? ? ?1vw = 7.5px; ? ?
? 100vw ?= 375px ? ? ? ?1vw = 3.75px ?
? 1px =0.1333333333333333vw
- 優點：頁面元素隨著頁面寬度變化
- 缺點：
? * 兼容性沒有rem好 ,得大量計算， 不是很精確
? * 轉換后的長度單位不夠直觀修改維護困難
```html
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? * {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? }
? ? ? ? .box {
? ? ? ? ? ? width: 1vw;
? ? ? ? ? ? height: 1vw;
? ? ? ? ? ? background-color: green;
? ? ? ? }
? ? ? ? .box1 {
? ? ? ? ? ? /* width: 100px; */
? ? ? ? ? ? width: 13.33vw;
? ? ? ? ? ? /* 100*0.1333=5.332 */
? ? ? ? ? ? height: 13.33vw;
? ? ? ? ? ? /* height: 100px; */
? ? ? ? ? ? background-color: pink;
? ? ? ? }
? ? </style>
</head>
<body>a
? ? <div class="box"></div>
? ? <div class="box1"></div>
? ? <!-- /* 在移動端調試，點擊responsive,調到750px */ -->
</body>
</html>
```
?在 Visual Studio Code 裝一個插件: px to vw
?轉換px--vw或vw--px ?捷鍵：alt +z（選中要換算的代碼）
注意：會給px-rem有沖突
### 3.4 vw + rem布局
? ? 確定基準值以常見的750px設計稿為例（寬度），根據vw單位和rem單位原理實現
在750px設計搞下，如果使用vw單位換算，可以理解成100vw = 750px，1px = 0.13333333vw；如果使用rem單位換算，預設1rem = 100px; 則100px = 13.333333vw
? ? html{
? ? ? ? font-size: 13.333333vw;
? ? }
?弊端 ： ?不是很精確
```css
750px ? 100vw ? 1vw = 7.5px; ? ?
375px ? 100vw ? ?1vw = 3.75px ?
以設計稿為準:
假設還是750px設計稿 ?750px=100vw ? ?1px=0.1333vw; ?
預設字體基礎值 100px ? 1rem = 100px ?= 13.33vw;
?
html {
? ? font-size:13.33vw;
}
? ? ?.box1 {
? ? ? ? ? ? width: 0.4rem;
? ? ? ? ? ? height: 0.8rem;
? ? ? ? ? ? background: pink;
? ? ? ? }
? ? ? ? /*width:40px;
? ? ? ? ? ? height: 80px; ?*/
```
?
## 15.4移動端項目
### 項目介紹
#### 項目名稱：
小U商城
#### 項目描述
小U商城是面向移動端的專業綜合網上購物商城，我們要完成 首頁、列表頁、詳情頁等靜態頁面的制作
#### 技術選型
布局采取rem適配布局
#### 設計圖尺寸
本設計圖采用 750px 設計尺寸
#### 開發工具
- VScode
- 藍湖
?
總結
- 上一篇： 给大家介绍几本财务书
- 下一篇： Korg - AudioGate播放器-