西部热线 | 助力西部开发,关注西部民生! |
adtop
adtop01
当前位置: 西部热线 > 生活

移动端HTML5样式小技巧

作者:沐瑶    栏目:生活    来源:搜狐    发布时间:2017-07-10 09:33

原标题:移动端HTML5样式小技巧

平时在移动端开发拼页面的过程中总会遇到一些问题,主要是各手机webview样式显示效果不一致造成的。以下总结了一些常见坑和一些小技巧,希望对看官有所帮助!本文只针对两大手机阵营 Android和IOS 中的魅蓝metal 和 iPhone6进行样式对比。

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

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

魅蓝文字已经飞起~

正常显示如果把line-height加1px,iPhone文字就会下移,由于我们app的ios用户居多,并且android机型太多,不同机型也会显示不同,所以只能退而求其次了。line-height的兼容问题不太好解决,容器高度越小,显示效果的差距越明显。稍微大一点的高度,最好把line-height设置为高度+1px,两个平台显示都还不错。

二、角标的实现

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

1.我们不确定角标内容的长度

2.角标的底色不能定死,能定死(能定死的话直接切个小体形就行了)通常就是一段文案后边拼接一个三角形,三角形很好写

adl03
adr1
adr2