现在不是过去能比得上手提式有线电话机显示效果依旧…区别样

移动端样式小技巧

2016/08/13 · CSS · 1
评论 ·
移动端

初藳出处: 大坚   

平日在运动端支付拼页面包车型大巴进程中总会遇见一些难点,首假设各手提式有线电话机webview样式呈现效果差别导致的。以下总括了一些常见坑和一些小手艺,希望对看官有所帮助!

正文只针对两大手提式有线电电话机阵营 Android和IOS 中的魅蓝metal 和
金立6实行体制相比。

一、line-height

line-height时不常用来文字居中,当然也可以有小同伴会用上下padding去写.but!不管你用padding还是line-height,不相同手机彰显效果依旧…分裂样。

相似会这么写

CSS

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

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

图片 1

啊,在我们的chrome由于字体小于9px已经看不出边框和字以内的茶余就餐之后了,再来看看Android和IOS的

图片 2 魅蓝文字已经飞起~
图片 3 ios平常展现

如果把line-height加1px,索爱文字就能够下移,由于大家app的ios顾客居多,何况android机型太多,不一样机型也会来得分裂,所以只好退而求其次了。

line-height的宽容难点不太好消除,容器高度越小,展现效果的歧异越刚烈。稍微大一些的万丈,最佳把line-height安装为中度+1px,三个平台展现都还不易。


二、多行省略

诚如大家的产品列表样式,会有标题行数的范围。

图片 4

怎么落到实处啊?

CSS

.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; }

1
2
3
4
5
6
7
8
9
.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:把标题容器的惊人写死,那样写应当要思考行高的坑,因为容器中度写死未来,不一致机型行高实际上显示效果区别等。
图片 5 高度写少了,有的机型会如此。
图片 6 写多了大概会这么。

自己的做法是,不影响布局的情形下尽心尽力调控line-height值大一些,行与行的间距变大,容器高度的设定必要多测量检验一些机型,调节文字相当的少出也不被屏蔽。


三、角标的贯彻

图片 7
无数项目ui会供给大家画这种梯形角标。难题来了

1.大家不分明角标内容的长度
2.角标的底色不能够定死,能定死(能定死的话一向切个小身形就行了)

常常正是一段文案前面拼接八个三角形,三角形很好写

CSS

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

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

本人看出的率先种写法是把三角形直接拼在前边的文案后面,当然那在iphone上是尚未难题的。但在一部分安卓机型上却会有1像素的空闲,就好像这么:
图片 8 小编今后感受到安卓阵营深远的恶意
缘由只怕是原则性在各安卓手提式有线电话机上会有分裂的法力。。好像我们都以猕猴,长的却都不均等。

对此有个好的化解方案:

XHTML

<p class=”rongqi”> <span class=”wenan”>跟团游</span>
<span class=”script”></span> </p>

1
2
3
4
<p class="rongqi">
    <span class="wenan">跟团游</span>
    <span class="script"></span>
</p>

CSS

.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;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.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就可以看的更明白:

图片 9


四、图像和文字标题

图片 10

一对广大的布局比方图+文案的,有八种方法能够去写,例如padding-left现在不是过去能比得上手提式有线电话机显示效果依旧…区别样。+background或者position+padding-left或者before伪元素。
现在不是过去能比得上手提式有线电话机显示效果依旧…区别样。前二种方法都得以把图片做到相对的垂直居中,可是它们都以相持整行的器皿举行固定的,由于line-height兼容难点的坑,图片实际上不自然会和文字对齐。借使有图像和文字对齐的急需的话,个人提出才用before伪元平昔布局,before能够相对文案来稳固。

CSS

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; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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;
}

还应该有一种状态,大家的图像和文字布局,是从数组中遍历出来的,类似下图:
图片 11
现在不是过去能比得上手提式有线电话机显示效果依旧…区别样。现在不是过去能比得上手提式有线电话机显示效果依旧…区别样。这种情景更符合position去写,所以写样式必需求基于不一致景色去挑选妥贴的秘技。


五、左右开间自适应

第四个小手艺结尾,图中的布局实际上是分左右两块的,依据ui的须求,文案是要左对齐,数字是要右对齐的。你也许首先想到的是把左边手的数字定位依然更动到那,侧边的容器加上个margin-right现在不是过去能比得上手提式有线电话机显示效果依旧…区别样。或者padding-right。那样能够实现,不过两边的文案有极端气象出现。

功能说不定是这么的:
图片 12
也大概是那般的
图片 13

因为你一向不明了两边文案的尺寸到底是不怎么。
自己的方案是用box布局,左边的容器设置box-flex:1,侧边不管它:

XHTML

<li class=”ent-li”> <img class=”ent-img” src=”img/1.png”>
<div class=”left”>主旨门票</div> <div
class=”right”>10</div> </li>

1
2
3
4
5
<li class="ent-li">
    <img class="ent-img" src="img/1.png">
    <div class="left">主题门票</div>
    <div class="right">10</div>
</li>

CSS

.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; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.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;
}

让大家看看最后可是条件下的显得效果:
图片 14
或者:
图片 15

因为pm以为数字更要紧,所以让文案去自适应,数字有多少长度就多少长度


六、display:inline-block

总之,成分有3种基本展现框类型,block块级,inline-block行内块级,inline行内。
inline-block是一种非凡存在,能够安装宽高也足以使元素在一行排列。

自己在开拓中会碰到以下两种布局:

图片 16

图片 17

这两种布局都得以用float:left来写,不过变化完了还索要领会浮动。所以能够直接把成分设置成inline-block一律能够活动排列

CSS

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

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

此处会有个小坑,正是行内成分在档案的次序和垂直排列的时候会有间隔。形成这种结果

图片 18图片 19
左侧是暗中同意情形下的功用,左边是改进后的效应,左侧第二行和第一行中间有段莫名的间隔,那并非我们真正想要的。
减轻的法子很轻巧:

CSS

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

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

七、模拟滚动

图片 20
宪章滚动也是在项目中境遇的广阔布局。布局供给弹层出来后,弹层中的内容能够滚动,弹层背后的列表不可能随弹层滚动而滚动。何况在弹层上海好笑剧团动的时候,整个页面也不可能随着滚动。
一向上代码:

XHTML

<section class=”father”> <section class=”content-body”>
<!–页面内容、蒙层、蒙层中的内容互为兄弟节点,制止点击时页面穿透–>
</section> <section class=”layout”>
<!–页面内容、蒙层、蒙层中的内容互为小朋友节点,幸免点击时页面穿透–>
</section> <section class=”layout-body”>
<!–页面内容、蒙层、蒙层中的内容互为小家伙节点,幸免点击时页面穿透–>
</section> </section>

1
2
3
4
5
6
7
8
9
10
11
<section class="father">
    <section class="content-body">
    <!–页面内容、蒙层、蒙层中的内容互为兄弟节点,防止点击时页面穿透–>
    </section>
    <section class="layout">
    <!–页面内容、蒙层、蒙层中的内容互为兄弟节点,防止点击时页面穿透–>
    </section>
    <section class="layout-body">
    <!–页面内容、蒙层、蒙层中的内容互为兄弟节点,防止点击时页面穿透–>
    </section>
</section>

CSS

.father{ height: 533px; overflow-y:
scroll;//页面低度设置为显示屏高度,不荒谬处境下当先滚动 } .content-body{
height: 533px; overflow-y:
scroll;//内容惊人设置为显示器中度,正常状态下超过滚动 } .layout{ height:
100%; width: 百分之百; 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: 1/2; width: 百分之百; position: fixed; left: 0; right:
0; bottom: 0; background: rgba(0, 0, 0, 0.7); overflow: hidden; z-index:
1000001; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.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;
}

当大家接触蒙层弹出时间调控制样式

CSS

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

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

那几个法子尽管达成了页面模拟滚动的成效,然而当蒙层弹出的时候设置了overflow:hidden会导致页面scrollTop造成0,页面相当于被滚到最上部了。固然UI只怕PM不乐意,请与他们撕逼。

2 赞 19 收藏 1
评论

图片 21

发表评论

电子邮件地址不会被公开。 必填项已用*标注