当你陪着家人嗑着瓜子,和家人一起看着春晚,顺便拿着手淘参与春晚抽奖互动的时候,杭州还有两百多程序员还奋战在一线当中。现在年也过完了,奖也抽了,红包也拿了。也该好好回来工作的时候了。这次很荣幸,自己能参与手淘过年项目(红包开光和春晚互动项目)的项目中,虽然仅仅参与其中的部分工作,但事后感觉有些东西还是应该总结总结的,为之后的项目做准备。那么简单的来总结一下,我自己在参与项目中用到的一些前端技术。 这些技术其实也并不是什么鲜为人知的技术栈,因为这些技术点已经出现很久了,只不过大家习惯了自己的开发模式,加上项目时间紧,怕尝试新的东西。事实上我自己也是如此,害怕使用这些技术点,给项目带来其他的风险(本来项目时间就很紧),庆幸的是,接下来了到的一些东西,经住了项目的考验,虽然当中踩过一些坑,但总算是无惊无险。 过年项目手淘过年项目,事实上分为两个,其中一个叫红包开光,另一个是春晚抽奖的互动项目。 上面两张图分别是红包开光和春晚互动的主界面视觉图。如果你参与过手淘过年互动的活动中,这两个界面应该对您来说并不会太陌生。 经过团队同学一起讨论,这次两个项目都基于Vue来开发,Vue只是一个JavaScript库而以,选择他并不没有太多的主要原因,而是想让团队在今后的项目开发的时候,JavaScript库能趋于统一,从而慢慢在项目中有所沉淀与积累。基于这个原因,我在其中主要做的事情,在这个脚手架中(也就是Vue-cli的基础)添加了以下三个部分:
PostCSS插件在互动脚手架中,目前已配置的PostCSS插件主要有:
PostCSS插件的配置Webpack项目的
对于这些PostCSS插件所起的作用和怎么配置,在其对应的GitHub上都有详细的描述。这里简要的描述一下,为什么在我们的项目中会采用这些PostCSS的插件:
在实际使用的时候,你可以把自定义属性
我个人比较喜欢用自定义属性,它和类名所起的作用是同等的。结构定义之后,需要在你的样式文件中添加一个统一的宽度比默认属性:
如果我们想要做一个
有一点需要特别注意:
编译前的CSS如下:
编译之后:
主要是因为在插件中做了相应的处理,不在每次调用
这个时候,编译出来的CSS就正常了:
目前采用PostCSS插件只是一个过渡阶段,在将来我们可以直接在CSS中使用 剩下的 在配置中需要配置相关的几个关键参数:
目前出视觉设计稿,我们都是使用
编译出来的CSS:
在不想要把
写CSS的时候:
编译出来的CSS:
上面解决了 由于浏览器对 而在采用Viewport Units Buggyfill的时候,需要手动给使用
如果每一个都这样来做,那么将是灾难性的。幸运的是,可以使用
上面这些PostCSS插件是在这次项目中使用的,也将会在后面的项目中继续使用,使用其主要原因是帮助我们解放双手能更好的撸。或许你对其中一些插件有更好的使用心得,欢迎和我们一起分享,如果你有更好的插件,能帮助我们解放双手,也欢迎分享给我们。 vw适配方案
Flexible的适合方案,在那个时期是非常强大的,想出这个方案的大神让我膜拜已久。当然,事物是两极的,他非常强大,但他也有自己的不足之处,特别是在 使用 大家看到众多,或许会生疑,那么还有不支持的将会是怎么?特别是老板跟我说,这次过年项目咱们使用 众所周知,浏览器对 为了能让项目更安全,在决定过年项目中采用 当然,完成这个技术方案的验证,其中还是碰到一些坑的,幸好能像打老怪一样,一个一个Fix。这里就不阐述整个过程,如果你感兴趣可以阅读《如何在Vue项目中使用vw实现移动端适配》一文。接下来简单的介绍一下 vw兼容方案移动端使用 引入JavaScript文件在你的HTML文件,比如 引入下面的JavaScript文件:
调用viewport-units-buggyfill的方法同样在HTML文件中调用 JavaScript
有关于Viewport Units Buggyfill更多的方法,可以阅读其官网文档。
Flexible项目无缝过渡到
|
1 |
<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script> |
在<head>标签添加
meta
标签:
1 |
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover"> |
为了兼容iPhone X的适配,在
meta
标签中添加了viewport-fit="cover"
参数处理。有关于这方面的可以阅读《iPhone X的缺口和CSS》和《iPhone X的Web设计》。
添加前面提到的PostCSS插件的配置,当然,你可以只添加处理px
转vw
和vw
配合Viewport Units Buggyfill的两个PostCSS插件:postcss-px-to-viewport
和postcss-viewport-units
。
PostCSS插件配置有一个强大之处,不管你使用的是什么脚手架,他的配置都非常的灵活,支持流行的配置工具,比如Webpack,gulp等。所以你不用担心不好配置。因为在使用Flexible时,也需要
px2rem
的PostCSS插件配置。
重新编译你的代码,并在浏览器中验证一下编译后的页面。为什么要这么做呢?主要是因为postcss-px-to-viewport
和postcss-viewport-units
两个插件会对::before
(:before
)、::after
(:after
)、img
中的content
做覆盖。如果你的项目中有使用到具有content
属性的元素,需要做一定的清理工作。目前这部分没有较好的方式,我也咨询过这两个插件的作者,他们反馈也没找到更好的方案,只能人肉处理,或者变相不使用::before
和::after
这样的东东,添加额外的元素标签来替代。如果你尝试之后,发现有更好的方案,欢迎把你的方案分享给我们。
自从苹果出了iPhone X的设备,对于前端开发的同学而言,避免不了对其适配处理。而且这部分适配的处理相对而言是较为繁锁的。我也一直在探寻从设计开始就能规避一些常规的适配问题。这部分内容正在整理,当其成熟之后再与大家分享。下面简单的罗列一下自己对iPhone X适配的处理思路。
苹果对于iPhone X上H5页面的适配,提供了特殊属性支持,包括meta标签的viewport
属性值中加入viewport-fit
和加入constant(safe-area-inset-*)
和env(safe-area-inset-*)
,这些属性是与iOS11以上的所有iPhone机型(不仅仅包括iPhone X)都相关的,故以iOS版本为区别具体分析一下全屏下的H5页面:
meta
标签下的viewport-fit
及constant(safe-area-inset-*)/env(safe-area-inset-*)
属性。viewport-fit="cover"
,H5页面会覆盖页面安全区域全屏展示,但是这样会带来页面元素会被“刘海儿”和底部Home Indicator遮挡问题,所以苹果提供在CSS中设置constant(safe-area-inset-*)
距离来规避遮挡问题。另外,页面不加viewport-fit="cover"
默认viewport-fit="contain/auto"
,也就是我们看到的页面不能覆盖安全区域的情况,此时constant(safe-area-inset-*)
的值都为0
。所以在meta标签的viewpoint
中加viewport-fit="cover"
时iOS10和iOS11下constant(safe-area-inset-*)
值的表现是不一样的。constant()
改成了env()
。另外,iOS11.2新增了CSS function: min()
和max()
。例如:padding-left: max(12px, env(safe-area-inset-left));
。在env(safe-area-inset-left)
值因为Webview变化时值也可以做出相应变化,取12px
和env(safe-area-inset-left)
的较大值。总结如下图:
通过媒体查询针对 iPhone X采用个性化样式处理:
1 2 3 4 |
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { /* iPhone X 独有样式写在这里*/ } |
最后感谢您花时间把这篇文章阅读完。上面介绍的内容就是我自己在手淘过年项目中采用到的部分前端技术,稍作整理与大家分享。如果其中有不对之处,烦请路过的大婶斧正。如果您在自己的项目中将采用上述提到的一些技术方案,踩到任何坑也欢迎一起探讨。
|