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

内容

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

一、Iconfont 字体图标原理以及实现

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

1.原理

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

2.实现

实现方法：详情

• unicode引用
• font-class引用
• symbol引用

二、Media媒体响应式布局

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

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

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

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

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弹性盒子布局

flex图片

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多行时，最后一行元素左对齐

四、移动端适配原理

1.单位简介

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)

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

3.参考

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