mobile

iPhone X的缺口和CSS

苹果公司(Apple)的发布会也开完了,新产品也将登陆了。估计很多开发人员看到iPhone X的设备是要崩溃了,特别对于前端开发人员更是如此。iPhone X的屏幕覆盖了整个手机的屏幕,为相机和其他各部件留出了一个空间。结果是屏幕设计出现了一些尴尬的情况。比如将网站限制在一个“安全区域”。而在屏幕上的安全区域中,造成网站左边或右边有空白区域。很多像我这样的前端开始在考虑,这个蛋疼的东西怎么处理。而且项目中肯定要考虑这个设备的处理方式。值得庆幸的是,有两个小技巧或许可以帮助我们。

移动端重构实战系列7——环形UI

CSS制作圆形进度条,总是有很多同学感到蛋疼。这篇文章主要分析下圆环的实现,以及如何在圆环的基础上实现一个抽奖转盘的效果,感兴趣的同学可以点击进入阅读全文。

一个方便定制及扩展的UI组件库:sheral

继WeUI,腾讯朋友又出一款UI组件库sheral。简单来说,sheral是个UI库,目前拥有25+常用移动端组件(如btn, card, media, nav, dialog, toast等),同时允许用户非常方便扩展及定制属于自己的组件。但是sheral决不只限于UI库,它还拥有了30+ Sass 的基础mixin%的封装及其他基础能力,有了这些基础能力,不仅快捷便利,更是拥有了更多扩展可能。感兴趣的可以看看。

移动端重构实战系列6——Icon与图片

Icon图片和图片在Web中随处可见(不管是早期的PC端,还是现在的移动端),而面对各种不同的终端,Icon图片和图片又应该如何处理呢?本篇主要从Icon及图片说下移动端重构碰到的一些问题及实践方法。

移动端重构实战系列5——form元素

表单是网页中重要的元素之一,也是人机交互的重要部分之一。不管哪个轻型或重型的库都离不开表单的制作,同样在Sheral中也提供了有关于Form元素部分的内容。感兴趣的同学,请阅读全文,慢慢体会。

移动端重构实战系列4——进入离开动画

动画一直以来都是一个很有意思的课程,不管是在PC或者说移动端使用的频率越来越高。那么在这篇文章中主要向大家介绍的是有关于进入离开的动画制作细节,感兴趣的同学继续往下阅读。

移动端重构实战系列3——各种等分

前面两节介绍了移动端重构中的基础知识和列表相关的知识,在这一节中主要介绍有关于等分的知识,而且文章从不同的角度分析了等分的实现方案与各种细节。

移动端重构实战系列2——line list

这个line list的名字是我自己起的(大概的意思是单行列表),要实现的东西为sheralline list,对应的scss组件为_line-list.scss,下图为line-list的一个缩影。

移动端重构实战系列1——基础知识

距离上个移动端重构系列已是两年了(不得不感叹时间是把杀猪刀)。这次将会带来实战系列,将欠下两年的债现在还上,给七年的重构赋予一次新生。既然是新的开始,先简单说下这个系列要用到的一些技术吧。同时也是对移动端重构一些技术的一个简单回顾。

移动端重构实战系列0——sandal 和 sheral

简单来说,sandal是基于Sass的一个移动端css的基础库,提供了一些基础的重置,常用的mixin,如flex布局,等分,水平垂直居中,常用图标等,基于它你可以非常方便快速地扩展出你需要的UI组件。

页面

返回顶部