公众账号

二维码 微信扫描关注

当前位置:首页 > 技术文章 > 前端开发 >

移动端样式小技巧

平时在移动端开发拼页面的过程中总会遇到一些问题,主要是各手机webview样式显示效果不一致造成的。以下总结了一些常见坑和一些小技巧,希望对看官有所帮助!

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

一、line-height

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

一般会这样写

.demo{ 
    height:16px;    
    line-height:14px;    
    font-size:9px;    
    border:1px solid #ff6815;
}

移动端样式小技巧_www.uibq.com

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

移动端样式小技巧_www.uibq.com    魅蓝文字已经飞起~

移动端样式小技巧_www.uibq.com    ios正常显示

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

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

二、多行省略

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

移动端样式小技巧_www.uibq.com

.demo{    
    display: -webkit-box;    //1.设置display类型为-webkit-box
    font-size: 14px;    
    line-height: 18px;    
    overflow: hidden;        //2.设置元素超出隐藏
    text-overflow: ellipsis; //3.设置超出样式为省略号
    -webkit-line-clamp: 2;   //4.设置2行应用省略
    -webkit-box-orient: vertical;
}

这样设置还要考虑一个极端的情况,就是标题不足两行。具体要看PM的需求,一是空出第二行的距离,二是让标题下边的元素顶上去。如果是第一种需求,有2种解决的方案。

关于 商务 项目 联系 友情链接网站地图 Copyright ©-2018 UiBQ版权所有(http://www.uibq.com)