移动端开发样式小技巧(一)

责编:menVScode 2017-06-14 16:31 阅读(825)

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

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

        一、多行省略

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

        3489339405-57b53c0670eaf_articlex

        实现代码:

.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种解决的方案。 

        1:把下边的元素都使用position:absoulte定位到固定的位置,不受标题行数影响。

        2:把标题容器的高度写死,这样写必须要考虑行高的坑,因为容器高度写死以后,不同机型行高实际上显示效果不一样。

        高度写少了,有的机型会这样。

105400605-57b53bb161abc_articlex

        写多了可能会这样。

2996934225-57b53c4812d3e_articlex

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


        二、line-height

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

        一般会这样写:

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

        4182519711-57b5394030229_articlex

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

        4116477708-57b53a03144f9_articlex魅蓝文字已经飞起~

      4182519711-57b5394030229_articlexios正常显示

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

        

        三、角标的实现

        488319414-57b53d899e4b5_articlex

        不少项目ui会要求我们画这种梯形角标。问题来了:1.我们不确定角标内容的长度2.角标的底色不能定死,能定死(能定死的话直接切个小体形就行了)

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

.script {
    width: 0;
    height: 0;        //控制宽高为0,用border宽度撑出一个三角形
    border-right: 10px solid transparent;
    border-top: 15px solid #c59c53;
}

        我看到的第一种写法是把三角形直接拼在前边的文案后边,当然这在iphone上是没有问题的。但在部分安卓机型上却会有1像素的间隙,就像这样:

        1842772438-57b5402e50dbc_articlex

        我现在感受到安卓阵营深深的恶意,原因可能是定位在各安卓手机上会有不同的效果。。好像大家都是猴子,长的却都不一样。

        对此有个好的解决方案:

<p class="rongqi">
    <span class="wenan">跟团游</span>
    <span class="script"></span>
</p>
.rongqi {//容器
    height: 15px;
    overflow: hidden;//设置超出隐藏
    position: absolute;
    top: 0;
    left: 0;
}
.wenan{//文案
    float: left;
    position: relative;    //设置相对定位
    z-index: 3;            //设置层级不被三角形挡住
    height: 15px;
    padding-left: 4px;
    line-height: 16px;
    color: #fff;
    font-size: 10px;
}
.script {
    width: 0;
    height: 0;
    border-right: 20px solid transparent;
    border-top: 30px solid #c59c53;    //这里的30px实际上远远超出容器的高度
    float: right;                      //就是为了高度超出被挡住做出梯形的效果,兼容各种机型
    margin-left: -9px;
}

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

2568836865-57b54086f2022_articlex

原址:https://segmentfault.com/a/1190000006237977

标签: html5 移动端
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码