mobile

再聊移动端页面的适配

前端圈真乱,这话一点不假。但乱也乱的好处,乱则生变,有变化才有进步。今天还是老调重谈,聊聊移动端页面的适配。因为对于一枚前端而言,天天和页面打交道(H5页面),那么布局的活总是少不了,这也将面临不同终端的适配问题。不知道你是否和我一样,页面布局总是或多或少会有一些蛋疼的事情发生。如果是的话,建议你花点时间阅读完下面我扯蛋的东东。

移动端重构实战系列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组件。

页面

返回顶部