前端培训-初级阶段（9 -12）

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

我们要讲什么

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

课后作业

1. 使用 Media 做一个商品列表，800 以下的屏幕显示两列，其他屏幕 width: 200px，能放多少放多少
2. 实现微信群组头像（尽可能多使用几种方法），avatar 和 border 都是不需要，我只是为了让大家看的清楚。单词居然写错了，还复制了好多次，还好我发现了。
   
3. 实现文字和图标混排，并尽可能多的显示文字。（尽可能多的使用几种方法）
   1.文字极多，三图标
   2.文字极多，两图标
   3.文字不多，两图标
   4.文字不多，三图标
4. 使用 Iconfont 做一个微信下面导航
   

Iconfont 字体图标(阿里巴巴矢量字体图标库)原理以及实现

1. Iconfont是什么？
   阿里妈妈MUX倾力打造的矢量图标管理、交流平台。设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。
2. Iconfont 地址
3. 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') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}

<i class="iconfont">&#x33;</i>

unicode是字体在网页端最原始的应用方式，特点是：

1. 兼容性最好，支持ie6+，及所有现代浏览器。
2. 支持按字体的方式去动态调整图标大小，颜色等等。
3. 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

2) font-class 引用

font-class 是 unicode 使用方式的一种变种，主要是解决 unicode 书写不直观，语意不明确的问题。其实和上面相比就是把字符写在 content: "\e502"; 中。

@font-face {font-family: "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, iOS 4.2+ */
  url('iconfont.svg?t=1552637571329#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-h5-copy:before {
  content: "\e502";
}

与unicode使用方式相比，具有如下特点：

1. 兼容性良好，支持ie8+，及所有现代浏览器。
2. 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
3. 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
4. 不过因为本质上还是使用的字体，所以多色图标还是不支持的。

3) symbol 引用

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。这种用法其实是做了一个svg的集合，与上面两种相比具有如下特点：

1. 支持多色图标了，不再受单色限制。
2. 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
3. 兼容性较差，支持 ie9+,及现代浏览器。
4. 浏览器渲染svg的性能一般，还不如png。

如何使用？

选择你所需要的，然后下载。看demo.html，里面有代码。

Media媒体响应式布局

使用 @media 查询，可以针对媒体类型、屏幕尺寸来设置样式。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

1. 语法

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

2. 媒体类型（mediatype）

   值	描述
   all	用于所有设备
   print	用于打印机和打印预览
   screen	用于电脑屏幕，平板电脑，智能手机等
   speech	应用于屏幕阅读器等发声设备

3. 媒体特征（media feature）

   测试页面，常用的其实不多，主要就是判断设备宽度。

   // https://v4.bootcss.com/docs/4.0/layout/overview/#responsive-breakpoints
   // Extra small devices (portrait phones, less than 576px)
   // No media query since this is the default in Bootstrap
   
   // Small devices (landscape phones, 576px and up)
   @media (min-width: 576px) { ... }
   
   // Medium devices (tablets, 768px and up)
   @media (min-width: 768px) { ... }
   
   // Large devices (desktops, 992px and up)
   @media (min-width: 992px) { ... }
   
   // Extra large devices (large desktops, 1200px and up)
   @media (min-width: 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弹性盒子布局

1. Flex布局是什么？
   2009年，W3C 提出了一种新的方案—- Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，很快就能很安全的使用。Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

2. 容器的属性（父级）

   属性名	属性值	默认值	描述
   display	flex inline-flex	static	定义为弹性盒子
   flex-direction	row(主轴为水平方向，起点在左端) row-reverse(主轴为水平方向，起点在右端) column(主轴为垂直方向，起点在上沿) column-reverse(主轴为垂直方向，起点在下沿)	row	排列方向
   flex-wrap	nowrap(不换行) wrap(换行，第一行在上方) wrap-reverse(换行，第一行在下方)	nowarp	内容放不下，如何换行
   flex-flow	<flex-direction> <flex-wrap>	row nowarp	是flex-direction属性和flex-wrap属性的简写形式
   justify-content	flex-start(左对齐) flex-end(右对齐) center(居中) space-between(两端对齐) space-around(每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍);	flex-start	主轴上的对齐方式，默认来说就是水平对齐text-align
   align-items	flex-start(顶部) flex-end(底部) center(居中) baseline(文字基线) stretch(垂直拉伸);	stretch	交叉轴对齐方式，默认来说就是垂直对齐vertical-align
   align-content	flex-start(顶部) flex-end(底部) center(居中) space-between(轴线之间的间隔平均分布) space-around(每根轴线两侧的间隔都相等) stretch(轴线占满整个交叉轴)	stretch	定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

3. 项目的属性（子集、子元素）

   1. order 定义项目的排列顺序。数值越小，排列越靠前，默认为0。（数值是有极限的，demo）
   2. flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
   3. flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。
   4. flex-basis 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
   5. flex 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
   6. align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

移动端适配原理 rem（px、em、rem、%、vm）

1. 移动端适配要解决的问题

   1. 各终端下的适配问题（宽度 640 750）
   2. Retina屏的细节处理 （iOS）

2. 如何解决问题

   1. rem 基于 html 的 font-size。实时更新 font-size 和屏幕宽度成比例，基于屏幕宽度适配

      1. 其中又分为基于媒介查询

         @media screen and (min-width:350px){html{font-size:342%;}}
         @media screen and (min-width:360px){html{font-size:351.5625%;}}
         @media screen and (min-width:375px){html{font-size:366.2%;}}
         @media screen and (min-width:384px){html{font-size:375%;}}
         @media screen and (min-width:390px){html{font-size:380.859%;}}
         @media screen and (min-width:410px){html{font-size:400%;}}
         @media screen and (min-width:432px){ /* 魅族3 */html{font-size:421.875%;}}
         @media screen and (min-width:480px){html{font-size:469%;}}
         @media screen and (min-width:540px){html{font-size:527.34%;}}
         @media screen and (min-width:640px){html{font-size: 625%;}}
         @media screen and (min-width:768px){html{font-size: 750%;}}

      2. 基于宽度计算（设计稿为 640）*0.15625
      3. Flexible 也就是我们常说的手淘H5页面的终端适配方案

   2. vw/vh/vmin/vmax 新单位，直接基于屏幕宽度适配

      1. vw 代表宽度分为 100 份。
      2. vh 代表屏幕高度分为 100 份。
      3. vmin 代表宽高最小值分为 100 份。
      4. vmax 代表宽高最大值分为 100 份。
   3. 基于媒介查询做（太费事了）
3. 合理的 viewport

<!-- dpr = 1--> 
<meta name="viewport" content="initial-scale=scale,maximum-scale=scale,minimum-scale=scale,user-scalable=no"> 
<!-- dpr = 2--> 
<meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no"> 
<!-- dpr = 3--> 
<meta name="viewport" content="initial-scale=0.3333333333,maximum-scale=0.3333333333,minimum-scale=0.3333333333,user-scalable=no">

上面说了那么多，其实还是有坑的，下面我们来说说适配有什么坑。

1. 不知道大家做过那种 ppt 的页面没，划来划去动画效果。宽高是没有比例的。所以在一些屏幕特别长的机型上就露底了。一般来说解决方案就是垂直居中页面了

2. 手淘方案在新出的曲面屏上表现怪异。那是因为他这个方案有一个最大值，而曲面屏超过了这个极限值。解决方案呢两个

   1. vw
   2. 水平居中页面咯。

往期内容

1. 前端培训-初级阶段（1 - 4）
2. 前端培训-初级阶段（5 - 8）

后记

惯例补上主讲人文章

参考资料

1. (引用) 培训目录出处-已备份到笔记
2. Iconfont字体生成原理及使用技巧
3. CSS3 @media 查询 --runoob
4. 再聊移动端页面的适配
5. Flex 布局教程：语法篇 --ruanyifeng
6. Flex 布局教程：实例篇 --ruanyifeng
7. 使用Flexible实现手淘H5页面的终端适配 #17