>

移动端样式小技巧

- 编辑:至尊游戏网站 -

移动端样式小技巧

移动端样式小本领

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

原来的书文出处爬山涉水 大坚   

Ba la la la ~ 读者对象们,你们好啊,又到了冷锋时间,话非常的少说,发车!

毕生在运动端支出拼页面包车型客车长河中总会超过一些难题,首倘诺各手提式有线电话机webview样式显示效果不平等导致的。以下总括了某些常见坑和局地小手艺,希望对看官有所扶助!

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


一、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,八个平台展现都还不易。


一、line-height

二、多行省略

雷同大家的产品列表样式,会有题目行数的范围。

图片 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值大学一年级些,行与行的间距变大,容器高度的设定必要多测量检验一些机型,调节文字没有多少出也不被挡住。


line-height平日用于文字居中,当然也会有小友人会用上下padding去写.but!不管你用padding依然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去写,所以写样式应当要遵照分裂景色去采纳妥贴的艺术。


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

五、左右上升的幅度自适应

第多少个小技能结尾,图中的布局实际上是分左右两块的,依据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感到数字更首要,所以让文案去自适应,数字有多少长度就多少长度


图片 16

六、display:inline-block

刚毅,成分有3种基本彰显框类型,block块级,inline-block行内块级,inline行内。
inline-block是如日中天种非常存在,能够设置宽高也得以使成分在生气勃勃行排列。

本身在付出中会境遇以下二种布局跋山涉水的近义词

图片 17

图片 18

那三种布局都得以用float:left来写,可是变化完了还索要驾驭浮动。所以能够平素把成分设置成inline-block意气风发律能够自行排列

CSS

.rongqi{//每块容器 display: inline-block;//设置行内块级 width: 百分之四十; //设置宽度为60% 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;
}

此地会有个小坑,便是行内成分在档案的次序和垂直排列的时候会有间距。产生这种结果

图片 19图片 20
左边手是暗中认可意况下的功力,侧面是修改后的功力,侧面第二行和率先行中间有段莫名的间距,那并非我们确实想要的。
消除的办法很简短跋山涉水的近义词

CSS

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

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

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

七、模拟滚动

图片 21
仿照滚动也是在类型中相遇的科学普及布局。布局供给弹层出来后,弹层中的内容能够滚动,弹层背后的列表不能够随弹层滚动而滚动。何况在弹层上海好笑剧团动的时候,整个页面也无法跟着滚动。
直接上代码爬山涉水

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: 百分百; 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/4; 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 评论

图片 22

图片 23

魅蓝文字已经飞起~

图片 24

正规展现

若是把line-height加1px,One plus文字就能下移,由于大家app的ios客户居多,并且android机型太多,分歧机型也会显得区别,所以必须要退而求其次了。

line-height的包容难题不太好化解,容器中度越小,呈现效果的分化越精晓。稍稍大学一年级点的惊人,最佳把line-height设置为中度+1px,七个平台展现都勉强能够。

二、多行省略

诚如我们的制品列表样式,会有标题行数的节制。

图片 25

怎么贯彻呢?

.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爬山涉水把题目容器的可观写死,那样写必定要思考行高的坑,因为容器中度写死之后,差别机型行高实际上展现效果不相仿。

图片 26

中度写少了,有的机型会这么。

图片 27

写多了恐怕会那样。

本人的做法是,不影响布局的动静下用尽了全力调整line-height值大一些,行与行的区间变大,容器中度的设定须求多测量试验一些机型,调整文字非常的少出也不被屏蔽。

三、角标的兑现


图片 28

重重项目ui会必要大家画这种梯形角标。难题来了

1.大家不分明角标内容的尺寸
2.角标的底色不可能定死,能定死(能定死的话一直切个小体态就行了)
习认为常正是日新月异段文案后面拼接贰个三角形,三角形很好写

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

自己看来的第大器晚成种写法是把三角形直接拼在头里的文案前边,当然那在iphone上是没十分的。但在意气风发部分安卓机型上却会有1像素的闲暇,就像那样跋山涉水的近义词

图片 29

自个儿前日感受到安卓阵营浓郁的黑心
缘由或许是永久在各安卓手提式有线电电话机上会有两样的功能。。好像大家都以猕猴,长的却都不如日方升致。

对此有个好的建设方案:

<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就能够看的越来越精晓跋山涉水的近义词

图片 30

四、图像和文字标题

图片 31

部分宽广的布局举个例子图+文案的,有各个办法得以去写,比如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;
}

再有风流倜傥种情景,大家的图像和文字布局,是从数组中遍历出来的,雷同下图:

图片 32

这种景况更相符position去写,所以写样式一定要依据分化处境去筛选适当的章程。

五、左右上涨的幅度自适应

第多个小手艺结尾,图中的布局实际上是分左右两块的,依据ui的急需,文案是要左对齐,数字是要右对齐的。你或者首先想到的是把右边手的数字定位还是转移到那,左边的容器加上个margin-right或然padding-right。这样能够完毕,可是两边的文案有极其气象出现。

效果与利益兴许是这么的跋山涉水的近义词

图片 33

也只怕是那般的

图片 34

因为您平素不知底两侧文案的尺寸到底是不怎么。
本身的方案是用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;
}

让我们看看最终可是条件下的显得效果跋山涉水的近义词

图片 35

或者:

图片 36

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

六、display:inline-block

刚强,成分有3种为主显示框类型,block块级,inline-block行内块级,inline行内。
inline-block是龙马精气神儿种特别存在,能够设置宽高也能够使成分在意气风发行排列。

自己在支付中会碰着以下二种布局爬山涉水

图片 37

图片 38

那二种布局都得以用float:left来写,不过变化完了还须求知道浮动。所以能够一贯把成分设置成inline-block相像能够活动排列

.rongqi{//每块容器
display: inline-block;//设置行内块级
width: 百分之七十五; //设置宽度为52%
font-size: 12px;
text-align: center;
}

那边会有个小坑,就是行内成分在档期的顺序和垂直排列的时候会有间隔。形成这种结果

图片 39

图片 40

左边是暗许意况下的效率,侧边是改过后的成效,左侧第二行和率先行中间有段莫名的区间,那并非我们实在想要的。
化解的章程比超级粗略爬山涉水

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

七、模拟滚动

图片 41

模仿滚动也是在类型中遇见的附近布局。布局需要弹层出来后,弹层中的内容能够滚动,弹层背后的列表不能够随弹层滚动而滚动。並且在弹层上海好笑剧团动的时候,整个页面也无法跟着滚动。
一向上代码爬山涉水

<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,页面约等于被滚到顶端了。


以上为民用见解,如有相仿,纯属巧合,接待大家多提意见!Bey 了 个 Bey ~

本文由IT-综合发布,转载请注明来源:移动端样式小技巧