前端—初级阶段3(9-12)

摘要：屏幕可见的最大宽度高度。相对于当前对象内文本的字体尺寸。特点值并不固定会继承父级元素的字体大小。所有未经调整的浏览器都符合。相对于父元素相对于根元素视窗宽度。可视区高度的和中较小的那个。一般情况之下，像素称为与设备无关的像素，简称。

1.Iconfont 字体图标(阿里巴巴矢量字体图标库)原理以及实现
 2.Media媒体响应式布局
 3.Flex弹性盒子布局
 4.移动端适配原理 rem（px、em、rem、%、vm）：详解
主讲详情

阿里巴巴矢量图形库:https://www.iconfont.cn/

浏览器根据font-family解析渲染为不同图形的过程：
读取文字内容转换成对应的 unicode码（）；
根据HTML里设置的 font-family （如果没设置则使用浏览器默认设置）去查找电脑里（如果有自定义字体@font-face ，则加载对应字体文件）对应字体的字体文件；
找到文件后根据 unicode 码去查找绘制外形，找到后绘制到页面上；

实现方法：详情

unicode引用

font-class引用

symbol引用

1.定义:@media 可以针对不同的屏幕尺寸设置不同的样式 测试
2.语法：
1)css中使用

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

2)针对不同的媒体使用不同 stylesheets

3.媒体类型mediatype

all 用于所有设备

print 用于打印机和打印预览

screen 用于电脑屏幕，平板电脑，智能手机等。

speech 应用于屏幕阅读器等发声设备

4.媒体功能 media feature 测试

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.org

flex图片

display：flex和display: inline-flex的区别: 详解

flex： 将对象作为弹性伸缩盒显示, 宽度默认为100%；

inline-flex：将对象作为内联块级弹性伸缩盒显示,会根据子元素的大小自适应宽度和高度

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;用于子项多行显示时，垂直方向上子项的对齐和分布方式。

order: ; 改变某一个flex子项的排序位置 / 整数值，默认值是 0 /

flex-grow: ;当flex容器空间剩余时候，单个元素扩展剩余空白间隙的比例。 / 数值，可以是小数，默认值是 0 /

flex-shrink: ; 当flex容器空间不足时候，单个元素的收缩比例。/ 数值，默认值是 1 /

flex-basis: | 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属性都是没有用的。

1) flex布局讲解
2) 多个子项目之间等间距排列
3) flex多行时，最后一行元素左对齐

1) px:屏幕设备物理上能显示出的最小的一点
浏览器最小可以识别12px大小的字体 解决方案

2) em:相对单位。相对于当前对象内文本的字体尺寸。
特点：1、em值并不固定；2、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)

方案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...

1.https://github.com/amfe/lib-f...
2.使用Flexible实现手淘H5页面的终端适配
3.postcss官网