最基础的前端就是HTML+CSS+Javascript。掌握这三项技术算是入门，但也只是入门而已。现在前端开发的定义远不止于此。前端小课堂（HTML/CSS/JS），本着提高技术水平，夯实基础知识的中心思想，开课（每周四）。下面我们就来聊聊Iconfont字体图标（阿里巴巴矢量字体图标库）的原理和Media媒体响应式布局的实现flex弹框布局移动端适配原理rem(px,em,rem,%,vm)课后作业是用MediaA做的商品列表，800以下屏幕显示两栏，其他屏幕宽度：200px，放多少可以实现微信群头像（尽量多用方法），头像和边框都不要，我只是想让大家看清楚。字写错了，抄了很多遍。幸运的是，我找到了。实现文字和图标的混合布局，尽可能多的显示文字。（尽量使用几种方法）1.文字很多，三个图标2.文字很多，两个图标3.文字不多，两个图标4.文字不多，三个图标用Iconfont做一个微信导航下面的Iconfont字体图标（阿里巴巴矢量字体图标库）的原理和Iconfont的实现是什么？阿里妈妈MUX是倾力打造的矢量图标管理交流平台。设计师将图标上传到Iconfont平台，用户可以自定义下载各种格式的图标，平台还可以将图标转换成字体，方便前端工程师自由调整调用。iconfont地址iconfont官方帮助中心原理实现1）unicode参考通过修改@font-face来定义字体，然后替换元素的font-family。（顺便说一句，有些网页是反爬的，服务器输出1594的数据，前端修改font-fmaily使1594对应5941，这样看到的数据是正确的，爬取的数据是假的。）@font-face{font-family:'iconfont';src:url('iconfont.eot');src:url('iconfont.eot?#iefix')格式('embedded-opentype'),url('iconfont.woff')格式('woff'),url('iconfont.ttf')格式('truetype'),url('iconfont.svg#iconfont')format('svg');}.iconfont{font-family:"iconfont"!important;字体大小：16px；字体样式：正常；-webkit-font-smoothing：抗锯齿；-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale;3unicode是网页最原始的字体应用方式。它的特点是：兼容性最好，支持ie6+，以及所有现代浏览器。支持按字体动态调整图标大小、颜色等。但是因为是字体，所以不支持多色。平台上只能使用单色图标，即使项目中有多色图标，也会自动去色。2）font-class引用font-class是unicode用法的一种变体，主要解决unicode的书写不直观和语义不明确的问题。其实和上面相比，字符写在content:"\e502";。@font-face{字体系列：“iconfont”；src:url('iconfont.eot?t=1552637571329');/*IE9*/src:url('iconfont.eot?t=1552637571329#iefix')format('embedded-opentype'),/*IE6-IE8*/url('data:application/x-font-woff2;charset=utf-8;base64,')format('woff2'),url('iconfont.woff?t=1552637571329')format('woff'),url('iconfont.ttf?t=1552637571329')format('truetype'),/*chrome,firefox,opera,Safari,Android,iOS4.2+*/url('iconfont.svg?t=1552637571329#iconfont')format('svg');/*iOS4.1-*/}.iconfont{font-family:"iconfont"!important;字体大小：16px；字体样式：正常；-webkit-font-smoothing：抗锯齿；-moz-osx-font-smoothing:grayscale;}.icon-h5-copy:before{content:"\e502";}与unicode用法相比，具有以下特点：兼容性好，支持ie8+，所有现代浏览器.与unicode相比，语义清晰，书写更直观。很容易看出这个图标是什么。因为使用class来定义图标，当需要更换图标时，只需要修改class中的unicode引用即可。但是由于本质上还是使用了字体，所以还是不支持多色图标。3）符号引用是一种全新的使用方式。应该说这会是未来的主流，也是目前平台推荐的用法。这个用法其实就是svg的集合。与以上两者相比，它有以下特点：支持多色图标，不再受限于单色。通过一些技巧，支持像字体一样通过font-size和color来调整样式。兼容性差，支持ie9+，以及现代浏览器。浏览器渲染svg性能一般，不如png。如何使用？选择您需要的并下载它。看demo.html，里面有代码。MediaMedia响应式布局使用@media查询来设置媒体类型和屏幕尺寸的样式。当您调整浏览器大小时，页面也会根据浏览器的宽度和高度重新呈现。语法@mediamediatypeand|not|only(mediafeature){CSS-Code;}MediaType(mediatype)ValueDescriptionallforallforalldevicesprintforprintersandprintpreviewscreenforcomputerscreens,tablets,smartphones,etc.Speechisappliedto屏幕阅读器和其他发声设备的媒体功能测试页。其实常用的并不多，主要是判断设备的宽度。//https://v4.bootcss.com/docs/4.0/layout/overview/#responsive-breakpoints//超小型设备（纵向手机，小于576px）//没有媒体查询，因为这是Bootstrap中的默认设置//小型设备（横向手机，576像素及以上）@media（最小宽度：576像素）{...}//中型设备（平板电脑，768像素及以上）@media（最小宽度：768像素）{...}//大型设备（桌面，992px及以上）@media（最小宽度：992px）{...}//超大型设备（大型桌面，1200px及以上）@media（最小宽度：1200px）{...}值说明device-height定义输出设备的屏幕可见高度device-width定义输出设备的屏幕可见宽度height定义输出设备中页面可见区域的高度width定义输出设备中页面可见区域的宽度max-device-height定义了输出设备屏幕的最大可见高度max-device-width定义了输出设备屏幕的最大可见宽度max-height定义了页面在输出设备中的最大可见区域高度max-width定义页面在输出设备中的最大可见区域宽度min-device-width定义输出设备屏幕的最小可见宽度min-device-height定义输出设备屏幕的最小可见高度min-height定义页面在输出设备中的最小可见区域高度min-width定义页面在输出设备中的最小可见区域宽度orientation定义页面在输出设备中的可见区域是否有高度大于或等于宽度。Flex弹框布局什么是Flex布局？2009年，W3C提出了一种新的解决方案——Flex布局，能够以简单、完整、响应式的方式实现各种页面布局。目前，所有浏览器都支持它，这意味着它很快就可以安全使用了。Flex是FlexibleBox的缩写，意为“弹性布局”，用于为盒模型提供最大的灵活性。容器属性(parent)属性名属性值默认值说明displayflexinline-flexstatic定义为弹性盒子flex-directionrow（主轴??为水平，起点在左端）row-reverse（主轴为水平,起点在右端)column(主轴垂直,起点在上边缘)column-reverse(主轴垂直,起点在下边缘)rowarrangementdirectionflex-wrapnowrap(无换行符)wrap(换行符，第一行在上面)wrap-reverse(换行符，第一行最下面一行)nowarp内容放不下，如何换行flex-flowrownowarp是flex-direction属性和flex-wrap属性的简写形式justify-contentflex-start(左对齐)flex-end(右对齐)center(居中)space-between(两端对齐))space-around（每个item两边的间隔相等。因此，item之间的间隔是item与border之间间隔的两倍）；flex-start主轴上的对齐方式，默认为水平对齐stretchcross-axisalignment方式，默认是垂直对齐vertical-alignalign-contentflex-start(top)flex-end(bottom)center(center)space-between(轴之间的间隔均匀分布)space-around（两边各轴间隔相等）stretch（轴占据整个交叉轴）stretch定义多个轴的对齐方式。如果项目只有一个轴，则此属性无效。项目的属性（子集、子元素）顺序定义了项目的排序顺序。值越小，排名越高，默认为0。（取值有限，demo）flex-grow属性定义了item的放大比例，默认为0，即如果还有剩余空间，则不放大。如果所有项目的flex-grow属性都为1，它们将平分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，而其他项目的flex-grow为1，则前者将占用其他项目两倍的剩余空间。flex-shrink定义item的缩小比例，默认为1，即空间不足时，item会收缩。如果所有item的flex-shrink属性都为1，当空间不足时，它们会按比例缩小。如果一个item的flex-shrink属性为0，其他item为1，前者在空间不足时不会收缩。负值对该属性没有影响。flex-basis定义在分配多余空间之前项目在主轴（主要尺寸）上占据多少空间。浏览器根据这个属性计算主轴是否有多余空间。它的默认值为auto，即项目的原始大小。可以设置为与width或height属性相同的值（比如350px），那么item将占据一个固定的空间。flex属性是flex-grow、flex-shrink和flex-basis的简写，默认值为01auto。最后两个属性是可选的。该属性有两个快捷键值：auto(11auto)和none(00auto)。建议先使用这个属性，而不是分别写三个单独的属性，因为浏览器会计算相关的值。align-self属性允许单个项目与其他项目具有不同的对齐方式，并且可以覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性。如果没有父元素，相当于stretch。注意设置flex布局后，子元素的float、clear、vertical-align属性将失效。移动端适配原理rem(px,em,rem,%,vm)移动端适配要解决的问题html的font-size。实时更新font-size与屏幕宽度成正比，基于屏幕宽度适配，分为媒体查询@mediascreen和(min-width:350px){html{font-size:342%;}}@media屏幕和(min-width:360px){html{font-size:351.5625%;}}@media屏幕和(min-width:375px){html{font-size:366.2%;}}@media屏幕和(min-width:384px){html{font-size:375%;}}@mediascreen和(min-width:390px){html{font-size:380.859%;}}@mediascreen和(min-width:410px){html{font-size:400%;}}@mediascreenand(min-width:432px){/*魅族3*/html{font-size:421.875%;}}@mediascreenand(min-width:480px){html{font-size:469%;}}@mediascreenand(min-width:540px){html{font-size:527.34%;}}@mediascreenand(min-width:640px){html{font-size:625%;}}@mediascreenand(min-width:768px){html{font-size:750%;}}根据宽度计算（设计稿为640）*0.15625灵活就是我们常说的手机淘宝H5页面的终端适配方案vw/vh/vmin/vmax的新单位很可怕ctly根据屏幕宽度适配，vw表示将宽度分成100份。vh代表屏幕高度被分成100份。vmin表示分成100份的最小宽度和高度。vmax表示分成100份的最大宽度和高度。根据媒体查询做（太麻烦了）合理viewport上面说了说了这么多，还是有坑的。说说适应的陷阱吧。不知道大家有没有做过那种ppt页面，穿越穿越的动画效果。宽度和高度不成比例。所以在一些屏幕特别长的机型上，底部是裸露的。一般来说，解决方法是让页面垂直居中。手机淘宝解决方案在新发布的曲面屏上表现异常。那是因为他的方案有一个最大值，曲面屏超过了这个极限。解决办法是用两个vws让页面水平居中。前期内容前端培训-初级（1-4）前端培训-初级（5-8）后记约定补充讲者文章参考（引文）培训目录源码-备份笔记iconfont字体生成原理及使用技巧CSS3@mediaquery--runoob然后说说移动页面的适配。Flex布局教程：语法--ruanyifengFlex布局教程：实例--ruanyifeng使用Flexible实现手淘H5页面的终端适配#17
