mobile

iPhone X的Web设计

在新的iPhone X的Safari浏览器中为你的网站显示留有边缘。内容自动设置在显示的安全区域内,这样它就不会被圆角或设备的传感器外壳遮挡住(俗称iPhone X的刘海)。在<body><html>元素中指定与页面的background-color一样的颜色用来填充整个页面。这样页面的安全区域和其余部分混合在一起。对于许多网站来说,这已经足够了。如果你的页面只有文本和图片,那么背景色的设置看起来也非常不错。对于其他页面——特别是那些设计全宽水平导航栏的页面,比如像下图的页面,可以选择稍微深入一点,充分利用新显示的功能。iPhone X人机界面指南详细介绍了一些通用的设计原则,并且UIKit文档讨论了本地应用程序可以采用的特定机制,以确保它们看起来不错。你的网站可以利用iOS 11中引入的一些类似WebKit API来充分利用边缘的优势。

iPhone X的缺口和CSS

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

再聊移动端页面的适配

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

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

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

一个方便定制及扩展的UI伟德1946手机版库:sheral

继WeUI,腾讯朋友又出一款UI伟德1946手机版库sheral。简单来说,sheral是个UI库,目前拥有25+常用移动端伟德1946手机版(如btn, card, media, nav, dialog, toast等),同时允许用户非常方便扩展及定制属于自己的伟德1946手机版。但是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伟德1946手机版为_line-list.scss,下图为line-list的一个缩影。

页面

返回顶部