前端—初級階段3(9-12)

時間 2019-12-07

標籤前端初級階段简体版

原文原文鏈接

內容

1.Iconfont 字體圖標(阿里巴巴矢量字體圖標庫)原理以及實現
2.Media媒體響應式佈局
3.Flex彈性盒子佈局
4.移動端適配原理 rem（px、em、rem、%、vm）：詳解
 主講詳情

1、Iconfont 字體圖標原理以及實現

阿里巴巴矢量圖形庫:https://www.iconfont.cn/php

1.原理

瀏覽器根據font-family解析渲染爲不一樣圖形的過程：
讀取文字內容轉換成對應的 unicode碼（）；
根據HTML裏設置的 font-family （若是沒設置則使用瀏覽器默認設置）去查找電腦裏（若是有自定義字體@font-face ，則加載對應字體文件）對應字體的字體文件；
找到文件後根據 unicode 碼去查找繪製外形，找到後繪製到頁面上；css

2.實現

實現方法：詳情html

unicode引用
font-class引用
symbol引用

2、Media媒體響應式佈局

1.定義:@media 能夠針對不一樣的屏幕尺寸設置不一樣的樣式測試
2.語法：
1)css中使用html5

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

2)針對不一樣的媒體使用不一樣 stylesheetsandroid

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

3.媒體類型mediatypecss3

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

4.媒體功能 media feature 測試git

width/height 頁面可見區域寬度,高度。
max-width/max-height 頁面最大可見區域寬度,高度。
min-width/min-height 頁面最小可見區域寬度,高度。
device-width/device-height 屏幕可見寬度,高度。
max-device-width/max-device-height 屏幕可見的最大寬度,高度。
min-device-width/min-device-height 屏幕最小可見寬度,高度。

5.用例
 http://2011.dconstruct.orggithub

3、Flex彈性盒子佈局

flex圖片segmentfault

display：flex和display: inline-flex的區別: 詳解瀏覽器

flex：將對象做爲彈性伸縮盒顯示, 寬度默認爲100%；
inline-flex：將對象做爲內聯塊級彈性伸縮盒顯示,會根據子元素的大小自適應寬度和高度

1.容器的屬性

flex-direction: row | row-reverse | column | column-reverse;用來控制子項總體佈局方向
flex-wrap: nowrap | wrap | wrap-reverse;用來控制子項總體單行顯示仍是換行顯示
flex-flow: <‘flex-direction’> || <‘flex-wrap’> 簡寫表示flex佈局的flow流動特性
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;水平方向上子項的對齊和分佈方式
align-items: stretch | flex-start | flex-end | center | baseline;垂直方向上子項的對齊方式
align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly;用於子項多行顯示時，垂直方向上子項的對齊和分佈方式。

2.項目的屬性

order: <integer>; 改變某一個flex子項的排序位置 / 整數值，默認值是 0 /
flex-grow: <number>;當flex容器空間剩餘時候，單個元素擴展剩餘空白間隙的比例。 / 數值，能夠是小數，默認值是 0 /
flex-shrink: <number>; 當flex容器空間不足時候，單個元素的收縮比例。/ 數值，默認值是 1 /
flex-basis: <length> | auto; 定義了在分配剩餘空間以前元素的默認大小/ 默認值是 auto /
flex: none(0 0 auto) | auto(1 1 auto) | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] /默認值爲 0 1 auto/
align-self: auto(繼承自flex容器的align-items屬性值) | flex-start | flex-end | center | baseline | stretch;控制單獨某一個flex子項的垂直對齊方式

注意：

在Flex佈局中，flex子元素的設置float，clear以及vertical-align屬性都是沒有用的。

3.用例

1) flex佈局講解
2) 多個子項目之間等間距排列
3) flex多行時，最後一行元素左對齊

4、移動端適配原理

1.單位簡介

1) px:屏幕設備物理上能顯示出的最小的一點
瀏覽器最小能夠識別12px大小的字體解決方案

2) em:相對單位。相對於當前對象內文本的字體尺寸。
特色：一、em值並不固定；二、em會繼承父級元素的字體大小。

由於任意瀏覽器的默認字體高都是16px。全部未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em,10px=0.625em。
爲了簡化font-size的換算，須要在css中的body選擇器中聲明font-size=62.5%，
這就使em值變爲 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em

3) rem :相對單位。相對於HTML根元素。

4) % ：相對於父元素

5) vm 相對於HTML根元素

vw:視窗寬度。1vw=可視區寬度的1%
vh:視窗高度。1vh=可視區高度的1%
vmin:vw和vh中較小的那個。
vmax:vw和vh中較大的那個。

6) 其餘

物理像素:(設備像素)是顯示設備中一個最微小的物理部件。每一個像素能夠根據操做系統設置本身的顏色和亮度。能夠理解爲咱們平時說的分辨率。
設備獨立像素:(密度無關像素)計算機座標系統中得一個點，這個點表明一個能夠由程序使用的虛擬像素(好比: css像素)，能夠理解爲視覺視口的大小
設備像素比(device pixel ratio)
設備像素比(dpr) = 物理像素 / 設備獨立像素
window.devicePixelRatio:獲取到當前設備的dpr
CSS像素:是一個抽像的單位，主要使用在瀏覽器上，用來精確度量Web頁面上的內容。通常狀況之下，CSS像素稱爲與設備無關的像素(device-independent pixel)，簡稱DIPs。
屏幕密度:指一個設備表面上存在的像素數量，它一般以每英寸有多少像素來計算(PPI)

2.原理

方案1：Flexible

針對不一樣手機屏幕尺寸和dpr動態的改變根節點html的font-size大小(基準值)。講解 :

;(function(win, lib) {
    var doc = win.document;
    var docEl = doc.documentElement;
    var metaEl = doc.querySelector('meta[name="viewport"]');
    var flexibleEl = doc.querySelector('meta[name="flexible"]');
    var dpr = 0;
    var scale = 0;
    var tid;
    var flexible = lib.flexible || (lib.flexible = {});
    
    if (metaEl) {
        console.warn('將根據已有的meta標籤來設置縮放比例');
        var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
        if (match) {
            scale = parseFloat(match[1]);
            dpr = parseInt(1 / scale);
        }
    } else if (flexibleEl) {
        var content = flexibleEl.getAttribute('content');
        if (content) {
            var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
            var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
            if (initialDpr) {
                dpr = parseFloat(initialDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));    
            }
            if (maximumDpr) {
                dpr = parseFloat(maximumDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));    
            }
        }
    }

    if (!dpr && !scale) {
        var isAndroid = win.navigator.appVersion.match(/android/gi);
        var isIPhone = win.navigator.appVersion.match(/iphone/gi);
        var devicePixelRatio = win.devicePixelRatio;
        if (isIPhone) {
            // iOS下，對於2和3的屏，用2倍的方案，其他的用1倍方案
            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                
                dpr = 3;
            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
                dpr = 2;
            } else {
                dpr = 1;
            }
        } else {
            // 其餘設備下，仍舊使用1倍的方案
            dpr = 1;
        }
        scale = 1 / dpr;
    }

    docEl.setAttribute('data-dpr', dpr);
    if (!metaEl) {
        metaEl = doc.createElement('meta');
        metaEl.setAttribute('name', 'viewport');
        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(metaEl);
        } else {
            var wrap = doc.createElement('div');
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);
        }
    }

    function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 540 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

    win.addEventListener('resize', function() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    // 倒退 緩存相關
    win.addEventListener('pageshow', function(e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    if (doc.readyState === 'complete') {
        doc.body.style.fontSize = 12 * dpr + 'px';
    } else {
        doc.addEventListener('DOMContentLoaded', function(e) {
            doc.body.style.fontSize = 12 * dpr + 'px';
        }, false);
    }
    

    refreshRem();

    flexible.dpr = win.dpr = dpr;
    flexible.refreshRem = refreshRem;
    flexible.rem2px = function(d) {
        var val = parseFloat(d) * this.rem;
        if (typeof d === 'string' && d.match(/rem$/)) {
            val += 'px';
        }
        return val;
    }
    flexible.px2rem = function(d) {
        var val = parseFloat(d) / this.rem;
        if (typeof d === 'string' && d.match(/px$/)) {
            val += 'rem';
        }
        return val;
    }

})(window, window['lib'] || (window['lib'] = {}));

方案2:使用vw適配

https://www.w3cplus.com/css/v...