移动端样式小技巧

原文:http://web.jobbole.com/87481/

本文只针对两大手机阵营 Android和IOS 中的魅蓝metal 和 iPhone6进行样式对比。

一、line-height

line-height经常用于文字居中,当然也有小伙伴会用上下padding去写.but!不管你用padding还是line-height,不同手机显示效果还是…不一样。

一般会这样写

1012195069-5779d3cc95678_articlex

嗯,在我们的chrome由于字体小于9px已经看不出边框和字之间的间隙了,再来看看Android和IOS的

3570856002-5779d551da3a6_articlex 魅蓝文字已经飞起~
425157533-5779d6f19e809_articlex ios正常显示

如果把line-height加1px,iPhone文字就会下移,由于我们app的ios用户居多,并且android机型太多,不同机型也会显示不同,所以只能退而求其次了。

line-height的兼容问题不太好解决,容器高度越小,显示效果的差距越明显。稍微大一点的高度,最好把line-height设置为高度+1px,两个平台显示都还不错。


二、多行省略

一般我们的产品列表样式,会有标题行数的限制。

3127540440-5779e35e49178_articlex

怎么实现呢?

这样设置还要考虑一个极端的情况,就是标题不足两行。具体要看PM的需求,一是空出第二行的距离,二是让标题下边的元素顶上去。如果是第一种需求,有2种解决的方案。
1:把下边的元素都使用position:absoulte定位到固定的位置,不受标题行数影响。
2:把标题容器的高度写死,这样写必须要考虑行高的坑,因为容器高度写死以后,不同机型行高实际上显示效果不一样。
4240161157-577a0369f1c7f_articlex 高度写少了,有的机型会这样。
1067959010-577a03c159859_articlex 写多了可能会这样。

我的做法是,不影响布局的情况下尽量控制line-height值大一些,行与行的间距变大,容器高度的设定需要多测试一些机型,控制文字不多出也不被挡住。


三、角标的实现

2412794715-577a052288a53_articlex
不少项目ui会要求我们画这种梯形角标。问题来了

1.我们不确定角标内容的长度
2.角标的底色不能定死,能定死(能定死的话直接切个小体形就行了)

通常就是一段文案后边拼接一个三角形,三角形很好写

我看到的第一种写法是把三角形直接拼在前边的文案后边,当然这在iphone上是没有问题的。但在部分安卓机型上却会有1像素的间隙,就像这样:
1423589903-577a08f879fb4_articlex 我现在感受到安卓阵营深深的恶意
原因可能是定位在各安卓手机上会有不同的效果。。好像大家都是猴子,长的却都不一样。

对此有个好的解决方案:

如果去除容器的overflow:hidden就可以看的更明白:

4188208134-577a10a2cc6ff_articlex


四、图文标题

1571826777-577a13a4e3a31_articlex

一些常见的布局例如图+文案的,有多种方式可以去写,比如padding-left+background或者position+padding-left或者before伪元素。
前两种方法都可以把图片做到绝对的垂直居中,但是它们都是相对整行的容器进行定位的,由于line-height兼容问题的坑,图片实际上不一定会和文字对齐。如果有图文对齐的需求的话,个人建议才用before伪元素来布局,before可以相对文案来定位。

还有一种情况,我们的图文布局,是从数组中遍历出来的,类似下图:
3031809425-577a19472412d_articlex
这种情况更适合position去写,所以写样式一定要根据不同情况去选择合适的方式。


五、左右宽度自适应

第四个小技巧结尾,图中的布局实际上是分左右两块的,依照ui的需求,文案是要左对齐,数字是要右对齐的。你可能最先想到的是把右侧的数字定位或者浮动到那,左侧的容器加上个margin-right或者padding-right。这样可以实现,但是两侧的文案有极端情况出现。

效果可能是这样的:
1935014380-577a1b6ba6d0e_articlex
也可能是这样的
4090968606-577a1bca341c2_articlex

因为你根本不知道两侧文案的长度到底是多少。
我的方案是用box布局,左侧的容器设置box-flex:1,右侧不管它:

让我们看看最终极端条件下的显示效果:
105773117-577a1dd4b0780_articlex
或者:
1781574890-577a1dfb4ef3d_articlex

因为pm觉得数字更重要,所以让文案去自适应,数字有多长就多长


六、display:inline-block

众所周知,元素有3种基本显示框类型,block块级,inline-block行内块级,inline行内。
inline-block是一种特殊存在,可以设置宽高也可以使元素在一行排列。

我在开发中会遇到以下两种布局:

1222474826-577a2b71e8f72_articlex

804974750-577a2b8746203_articlex

这两种布局都可以用float:left来写,但是浮动完了还需要清楚浮动。所以可以直接把元素设置成inline-block同样可以自动排列

这里会有个小坑,就是行内元素在水平和垂直排列的时候会有间距。造成这种结果

2312818834-577a2eeca2815_articlex87844889-577a2ef9d25e0_articlex
左边是默认情况下的效果,右侧是改进后的效果,左边第二行和第一行中间有段莫名的间距,这并不是我们真正想要的。
解决的办法很简单:


七、模拟滚动

1587538432-577a309b10fe6_articlex
模拟滚动也是在项目中遇到的常见布局。布局要求弹层出来后,弹层中的内容可以滚动,弹层背后的列表不能随弹层滚动而滚动。并且在弹层上滑动的时候,整个页面也不能随之滚动。
直接上代码:

当我们触发蒙层弹出时控制样式

这个方法虽然实现了页面模拟滚动的效果,但是当蒙层弹出的时候设置了overflow:hidden会导致页面scrollTop变成0,页面相当于被滚到顶部了。如果UI或者PM不愿意,请与他们撕逼。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值