摘要:前端最基础的就是。往期内容前端培训初级阶段前端培训初级阶段后记惯例补上主讲人文章参考资料引用培训目录出处已备份到笔记字体生成原理及使用技巧查询再聊移动端页面的适配布局教程语法篇布局教程实例篇使用实现手淘页面的终端适配
前端最基础的就是 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是什么?
阿里妈妈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;} 3
2) font-class 引用unicode是字体在网页端最原始的应用方式,特点是:
兼容性最好,支持ie6+,及所有现代浏览器。
支持按字体的方式去动态调整图标大小,颜色等等。
但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。
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"; }
3) symbol 引用与unicode使用方式相比,具有如下特点:
兼容性良好,支持ie8+,及所有现代浏览器。
相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。
因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。
不过因为本质上还是使用的字体,所以多色图标还是不支持的。
如何使用?这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。这种用法其实是做了一个svg的集合,与上面两种相比具有如下特点:
支持多色图标了,不再受单色限制。
通过一些技巧,支持像字体那样,通过font-size,color来调整样式。
兼容性较差,支持 ie9+,及现代浏览器。
浏览器渲染svg的性能一般,还不如png。
选择你所需要的,然后下载。看demo.html,里面有代码。
Media媒体响应式布局使用 @media 查询,可以针对媒体类型、屏幕尺寸来设置样式。当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
语法
@media mediatype and|not|only (media feature) { CSS-Code; }
媒体类型(mediatype)
值 | 描述 |
---|---|
all | 用于所有设备 |
用于打印机和打印预览 | |
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 | 定义输出设备中的页面可见区域高度是否大于或等于宽度 |
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 | 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 | 定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。 |
项目的属性(子集、子元素)
order 定义项目的排列顺序。数值越小,排列越靠前,默认为0。(数值是有极限的,demo)
flex-grow 属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
flex-shrink 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。负值对该属性无效。
flex-basis 定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。
flex 属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性,而不是多带带写三个分离的属性,因为浏览器会推算相关值。
align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。移动端适配原理 rem(px、em、rem、%、vm)
移动端适配要解决的问题
各终端下的适配问题(宽度 640 750)
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 新单位,直接基于屏幕宽度适配
vw 代表宽度分为 100 份。
vh 代表屏幕高度分为 100 份。
vmin 代表宽高最小值分为 100 份。
vmax 代表宽高最大值分为 100 份。
基于媒介查询做(太费事了)
合理的 viewport
上面说了那么多,其实还是有坑的,下面我们来说说适配有什么坑。
不知道大家做过那种 ppt 的页面没,划来划去动画效果。宽高是没有比例的。所以在一些屏幕特别长的机型上就露底了。一般来说解决方案就是垂直居中页面了
手淘方案在新出的曲面屏上表现怪异。那是因为他这个方案有一个最大值,而曲面屏超过了这个极限值。解决方案呢两个
vw
水平居中页面咯。
往期内容前端培训-初级阶段(1 - 4)
前端培训-初级阶段(5 - 8)
后记惯例补上主讲人文章
参考资料(引用) 培训目录出处-已备份到笔记
Iconfont字体生成原理及使用技巧
CSS3 @media 查询 --runoob
再聊移动端页面的适配
Flex 布局教程:语法篇 --ruanyifeng
Flex 布局教程:实例篇 --ruanyifeng
使用Flexible实现手淘H5页面的终端适配 #17
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/53884.html
摘要:前端培训初级阶段语法变量值类型运算符语句前端培训初级阶段内置对象函数前端培训初级阶段类模块继承基础内容知识我们会用到。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。 该文为前端培训-初级阶段(1...
摘要:在掘金摸鱼的时候看到了一个题第题搜索如何防抖,如何处理中文输入,感觉挺有意思的。测试地址事件输入法事件输入法的第一个字母时触发。输入法状态输入内容。输入法选择之后触发。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我...
摘要:在掘金摸鱼的时候看到了一个题第题搜索如何防抖,如何处理中文输入,感觉挺有意思的。测试地址事件输入法事件输入法的第一个字母时触发。输入法状态输入内容。输入法选择之后触发。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我...
摘要:前端培训初级阶段语法变量值类型运算符语句前端培训初级阶段内置对象函数基础内容知识我们会用到。模块定义加载模块继承中的继承依赖于原型链继承。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。 该文为前...
摘要:前端最基础的就是。但是如果是盗窃,异常提交请求,这些就属于危险操作。可以用来伪装成其他用户操作,有可能就会造成财产上的损失。劫持有的时候运营商的劫持还是没办法。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦...
摘要:前端最基础的就是。这是初级阶段的最后一堂了。敏感数据要设置防止意外的被他人获取。是什么服务器端存放数据。都是用来做浏览器端存储的。解决的问题的存储大小问题。该使用索引来实现对该数据的高性能搜索。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,...
阅读 993·2021-11-22 14:56
阅读 941·2021-11-11 16:54
阅读 7086·2021-09-23 11:55
阅读 2954·2021-09-22 15:57
阅读 2771·2021-08-27 16:25
阅读 652·2019-08-30 15:55
阅读 1640·2019-08-30 15:43
阅读 1576·2019-08-30 14:23