内容1.Iconfont字体图标（阿里巴巴矢量字体图标库）原理与实现2.Media媒体响应式布局3.Flex弹框布局4.移动端适配原理rem(px,em,rem,%,vm)：详解讲座详情1.iconfont字体图标原理及阿里巴巴矢量图库的实现：https://www.iconfont.cn/1。原理分析浏览器根据font-family渲染成不同图形的过程：读取文本内容，转换成对应的unicode编码()；根据HTML中设置的font-family搜索电脑（如果有自定义字体）（如果没有设置，使用浏览器默认设置@font-face，然后加载对应的字体文件）的字体文件相应的字体；找到文件，根据unicode编码找到绘图形状，找到后在页面上绘制；2.实现方法：unicode参考font-class参考符号参考详解2.媒体响应式布局1.定义：@media可以针对不同的屏幕尺寸设置不同的样式测试2.语法：1）使用@mediamediatypeand|not|only（媒体功能）{CSS代码；在css}2)为不同的媒体使用不同的样式表3.媒体类型mediatypeall用于在所有设备上打印用于计算机屏幕、平板电脑、智能手机等的打印机和打印预览屏幕。语音应用于屏幕阅读器等发声设备。4.媒体特征mediafeaturetestwidth/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.org3.flex弹性框布局flex图片显示：flex与display：inline-flex区别：flex详解：将对象显示为弹性框，默认宽度为100%；inline-flex：将对象显示为内联块级弹性框，会根据子元素的大小自适应宽高1.容器的属性flex-direction：row|行反转|栏目|列反转；用于控制子项的整体布局方向flex-wrap:nowrap|包装|换行；用于控制子项整体单行显示或换行显示flex-flow:<'flex-direction'>||<'flex-wrap'>简写表示flex布局的流特性justify-content:flex-start|弹性端|中心|间隔|环绕空间|空间均匀；子项在水平方向的对齐分布align-items:stretch|开始|弹性端|中心|基线；子项的垂直对齐方式align-content:stretch|弹性启动|弹性端|中心|间隔|环绕空间|空间均匀；forchildren多行显示时子项在垂直方向的对齐和分布。2.物品属性顺序：<整数>；更改某个flexitem的排序位置/整数值，默认值为0/flex-grow:;当flex容器空间剩余时，单个元素扩展剩余的空白空间比例。/number，可以是小数，默认值为0/flex-shrink:;当flex容器空间不足时，单个元素的收缩率。/数字，默认值为1/flex-basis:|汽车;在分配剩余空间之前定义元素的默认大小/默认值为auto/flex:none(00auto)|自动（11自动）|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]/默认值为01auto/align-self:auto（继承自flex容器值的align-items属性）|弹性启动|弹性端|中心|基线|拉紧;控制单个flexitem的垂直对齐注意：在Flex布局中，flex子元素的float、clear、vertical-align属性的设置都是无用的。3.用例1)flex布局解释2)多个子项等间距排列3)有多条flex行时，最后一行元素左对齐显示的最小点是浏览器可以识别的一种字体大小至少为12px。解法2）em：相对单位。相对于当前对象中文本的字体大小。特点：1、em值不固定；2、em会继承父元素的字体大小。因为任何浏览器默认的字体高度都是16px。所有未经调整的浏览器都符合：1em=16px。那么12px=0.75em，10px=0.625em。为了简化字体大小转换，需要在css中的body选择器中声明font-size=62.5%，使得em值16px*62.5%=10px，所以12px=1.2em，10px=1em3)rem：相对单位。相对于HTML根元素。4）%：相对于父元素5）vm相对于HTML根元素vw：窗口宽度。1vw=可见区域宽度的1%vh：窗口高度。1vh=视口高度的1%vmin：vw和vh中较小的一个。vmax：vw和vh中的较大者。6)其他物理像素：（设备像素）是显示设备中最小的物理部分。每个像素都可以根据操作系统设置自己的颜色和亮度。可以理解为我们平时所说的决议。设备无关像素：（density-independentpixel）计算机坐标系中的一个点，代表一个可以被程序使用的虚拟像素（如：css像素），可以理解为视觉视口的大小（devicepixelratio))DevicePixelRatio(dpr)=物理像素/设备独立像素window.devicePixelRatio：获取当前设备的dprCSS像素：是一个抽象的单位，主要用于浏览器，准确衡量网页内容.通常，CSS像素称为设备无关像素，简称DIP。屏幕密度：指的是设备表面的像素点数，通常以每英寸多少像素点（PPI）来计算2.原理方案一：灵活动态改变根节点html的font-sizefordifferentmobile手机屏幕尺寸和dpr尺寸（参考值）。解释:;(function(win,lib){vardoc=win.document;vardocEl=doc.documentElement;varmetaEl=doc.querySelector('meta[name="viewport"]');varflexibleEl=doc.querySelector('meta[name="flexible"]');vardpr=0;varscale=0;vartid;varflexible=lib.flexible||(lib.flexible={});if(metaEl){console.warn('将根据已有的meta标签来设置缩小比例');varmatch=metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);if(匹配){scale=parseFloat(match[1]);dpr=parseInt(1/scale);}}elseif(flexibleEl){varcontent=flexibleEl.getAttribute('content');if(content){varinitialDpr=content.match(/initial\-dpr=([\d\.]+)/);varmaximumDpr=content.match(/maximum\-dpr=([\d\.]+)/);如果（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){varisAndroid=win.navigator.appVersion.match(/android/gi);varisIPhone=win.navigator.appVersion.match(/iphone/gi);vardevicePixelRatio=win.devicePixelRatio;if(isIPhone){//iOS下，2、3屏使用2倍scheme，其余使用1倍schemeif(devicePixelRatio>=3&&(!dpr||dpr>=3)){dpr=3;}elseif(devicePixelRatio>=2&&(!dpr||dpr>=2)){dpr=2;}否则{dpr=1;}}else{//在其他设备下，仍然使用1-foldschemedpr=1;}规模=1/dpr;}docEl.setAttribute('data-dpr',dpr);如果(!metaEl){metaEl=doc.createElement('meta');元El.set属性（'名称'，'视口'）；metaEl.setAttribute('content','initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no');如果(docEl.firstElementChild){docEl.firstElementChild.appendChild(metaEl);}else{varwrap=doc.createElement('div');裹。appendChild(metaEl);医生。写（包装。innerHTML）；}}functionrefreshRem(){varwidth=docEl.getBoundingClientRect().width;如果（宽度/dpr>540）{宽度=540*dpr;}varrem=宽度/10;docEl.style.fontSize=rem+'px';flexible.rem=win.rem=rem;}win.addEventListener('resize',function(){clearTimeout(time);time=setTimeout(refreshRem,300);},false);//倒退绑定win.addEventListener('pageshow',function(e){if(e.persisted){clearTimeout(time);time=setTimeout(refreshRem,300);}}，错误的）;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){varval=parseFloat(d)*this.rem;if(typeofd==='string'&&d.match(/rem$/)){val+='px';}返回值；}flexible.px2rem=function(d){varval=parseFloat(d)/this.rem;if(typeofd==='string'&&d.match(/px$/)){val+='rem';}返回值；}})(窗口,窗口['lib']||(窗口['lib']={}));方案二：使用vw适配https://www.w3cplus.com/css/v...3.参考1.https://github.com/amfe/lib-f...2.使用Flexible实现手机淘宝H5页面的终端适配3.postcss官网
