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

2019年8月31日 166次阅读来源: linong

前端最基本的就是 HTML+CSS+Javascript。控制了这三门手艺就算入门，但也仅仅是入门，如今前端开辟的定义已远远不止这些。前端小教室（HTML/CSS/JS），本着提拔手艺程度，打牢基本知识的中间思想，我们开课啦（每周四）。

我们要讲什么

Iconfont 字体图标(阿里巴巴矢量字体图标库)道理以及完成
Media媒体相应式规划
Flex弹性盒子规划
挪动端适配道理 rem（px、em、rem、%、vm）

课后功课

运用 Media 做一个商品列表，800 以下的屏幕显现两列，其他屏幕 width: 200px，能放若干放若干
完成微信群组头像（尽量多运用几种要领），avatar 和 border 都是不须要，我只是为了让人人看的清晰。单词竟然写错了，还复制了好屡次，还好我发现了。
完成笔墨和图标混排，并尽量多的显现笔墨。（尽量多的运用几种要领）
1.笔墨极多，三图标
2.笔墨极多，两图标
3.笔墨不多，两图标
4.笔墨不多，三图标
运用 Iconfont 做一个微信下面导航

Iconfont 字体图标(阿里巴巴矢量字体图标库)道理以及完成

Iconfont是什么？
阿里妈妈MUX倾力打造的矢量图标治理、交流平台。设想师将图标上传到Iconfont平台，用户能够自定义下载多种花样的icon，平台也可将图标转换为字体，便于前端工程师自在调解与挪用。
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') 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是字体在网页端最原始的运用体式格局，特性是：
兼容性最好，支撑ie6+，及一切当代浏览器。
支撑按字体的体式格局去动态调解图标大小，色彩等等。
然则由于是字体，所以不支撑多色。只能运用平台里单色的图标，就算项目里有多色图标也会自动去色。

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运用体式格局比拟，具有以下特性：
兼容性优越，支撑ie8+，及一切当代浏览器。
比拟于unicode语意明白，誊写更直观。能够很轻易区分这个icon是什么。
由于运用class来定义图标，所以当要替代图标时，只须要修正class内里的unicode援用。
不过由于本质上照样运用的字体，所以多色图标照样不支撑的。

3) symbol 援用

这是一种全新的运用体式格局，应该说这才是将来的主流，也是平台现在引荐的用法。这类用法实际上是做了一个svg的鸠合，与上面两种比拟具有以下特性：
支撑多色图标了，不再受单色限定。
经由过程一些技能，支撑像字体那样，经由过程font-size,color来调解款式。
兼容性较差，支撑 ie9+,及当代浏览器。
浏览器衬着svg的机能平常，还不如png。

怎样运用？

挑选你所须要的，然后下载。看demo.html，内里有代码。

Media媒体相应式规划

运用 @media 查询，能够针对媒体范例、屏幕尺寸来设置款式。当你重置浏览器大小的过程当中，页面也会依据浏览器的宽度和高度从新衬着页面。

语法

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

媒体范例（mediatype）
值形貌
all 用于一切装备
print 用于打印机和打印预览
screen 用于电脑屏幕，平板电脑，智能手机等
speech 运用于屏幕阅读器等发声装备

值	形貌
all	用于一切装备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等
speech	运用于屏幕阅读器等发声装备

媒体特性（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	定义输出装备中的页面可见地区高度是不是大于或即是宽度

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

Flex弹性盒子规划

Flex规划是什么？
2009年，W3C 提出了一种新的计划—- Flex规划，能够轻便、完全、相应式地完成种种页面规划。现在，它已得到了一切浏览器的支撑，这意味着，很快就可以很平安的运用。Flex 是 Flexible Box 的缩写，意为”弹性规划”，用来为盒状模子供应最大的灵活性。

容器的属性（父级）

属性名	属性值	默许值	形貌
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	定义了多根轴线的对齐体式格局。假如项目只要一根轴线，该属性不起作用。

项目的属性（子集、子元素）
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. 各终端下的适配题目（宽度 640 750）
2. Retina屏的细节处置惩罚（iOS）

怎样处置惩罚题目

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

个中又分为基于序言查询

@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%;}}

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

vw/vh/vmin/vmax 新单元，直接基于屏幕宽度适配
1. vw 代表宽度分为 100 份。
2. vh 代表屏幕高度分为 100 份。
3. vmin 代表宽高最小值分为 100 份。
4. vmax 代表宽高最大值分为 100 份。
基于序言查询做（太省事了）

合理的 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">

上面说了那么多，实在照样有坑的，下面我们来讲说适配有什么坑。

不知道人人做过那种 ppt 的页面没，划来划去动画结果。宽高是没有比例的。所以在一些屏幕迥殊长的机型上就露底了。平常来讲处置惩罚计划就是垂直居中页面了
手淘计划在新出的曲面屏上表现奇异。那是由于他这个计划有一个最大值，而曲面屏超过了这个极限值。处置惩罚计划呢两个
1. vw
2. 程度居中页面咯。

往期内容

跋文

通例补上主讲人文章

参考资料

    原文作者：linong
    原文地址: https://segmentfault.com/a/1190000018567074
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。