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

责编:menVScode 2017-06-14 17:33 阅读(854)

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

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

        移动端开发样式小技巧(一)http://www.menvscode.com/detail/5940f45d66b8f53341c64c22

        四、图文标题

        1619639030-57b541d703e79_articlex

        一些常见的布局例如图+文案的,有多种方式可以去写,比如padding-left+background或者position+padding-left或者before伪元素。

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

p{
    height:44px;
    line-height:45px;
    padding-left:40px;
}
p::before{
    content: '';
    display: inline-block;
    background: url("../img/xxx.png") center center no-repeat;
    background-size: contain;    //这里把背景图片尺寸设置成contain,不需要考虑图片拉伸的问题
    width: 14px;
    height: 18px;
    margin: 0 5px -4px 0;
}

        还有一种情况,我们的图文布局,是从数组中遍历出来的,类似下图:

        3542182008-57b543b281663_articlex

        这种情况更适合position去写,所以写样式一定要根据不同情况去选择合适的方式。


        五、左右宽度自适应

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

        效果可能是这样的:

1321542567-57b544ba0c890_articlex

        也可能是这样的:

1997696231-57b544c40b938_articlex

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

<li class="ent-li">
    <img class="ent-img" src="img/1.png">
    <div class="left">主题门票</div>
    <div class="right">10</div>
</li>
.ent-li {
    margin-left: 45px;
    height: 44px;
    display: -webkit-box; //box布局并做好兼容
    display: box;
    position: relative;
}
.ent-li .left {
    -webkit-box-flex: 1; //box-flex:1控制宽度自适应
    box-flex: 1;
    text-align: left;
    line-height: 45px;
    font-size: 16px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ent-li .right {    //右侧啥都不用管
    text-align: right;
    line-height: 45px;
    font-size: 12px;
    color: #999;
    padding-left: 10px;
}

        让我们看看最终极端条件下的显示效果:

QQ截图20170614170718

        

        六、display:inline-block

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

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

        QQ截图20170614170951

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

.rongqi{//每块容器
    display: inline-block;//设置行内块级
    width: 25%;           //设置宽度为1/4
    font-size: 12px;
    text-align: center;
}

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

QQ截图20170614171413

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

.father{
    font-size:0;//父容器字体大小设置成0,具体的字体大小应用在文案上
}

        

        七、模拟滚动

QQ截图20170614171613

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

<section class="father">
    <section class="content-body">
    <!--页面内容、蒙层、蒙层中的内容互为兄弟节点,防止点击时页面穿透-->
    </section>
    <section class="layout">
    <!--页面内容、蒙层、蒙层中的内容互为兄弟节点,防止点击时页面穿透-->
    </section>
    <section class="layout-body">
    <!--页面内容、蒙层、蒙层中的内容互为兄弟节点,防止点击时页面穿透-->
    </section>
</section>
.father{
    height: 533px;
    overflow-y: scroll;//页面高度设置为屏幕高度,正常情况下超出滚动
}
.content-body{
    height: 533px;
    overflow-y: scroll;//内容高度设置为屏幕高度,正常情况下超出滚动
}
.layout{
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    overflow: hidden;
    z-index: 1000000;
}
.layout-body{
    height: 46%;
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    overflow: hidden;
    z-index: 1000001;
}

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

.father{
    height: 533px;
    overflow-y: hidden;//设置超出隐藏,那么页面不会触发滚动
}
.content-body{
    height: 533px;
    overflow-y: hidden;//设置超出隐藏,那么页面不会触发滚动
}

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

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

邮箱快速注册

忘记密码