来自 前端知识 2019-11-14 17:53 的文章
当前位置: 金沙澳门官网网址 > 前端知识 > 正文

移动端样式小技巧

移动端样式小本事

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

初藳出处: 大坚   

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

平时在活动端支付拼页面包车型大巴进程中总会境遇有些主题材料,首假设各手提式有线电话机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,七个平台展现都还不易。


一、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: 十分四; //设置宽度为二分之一 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: 约得其半; 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,BlackBerry文字就能够下移,由于大家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.角标的底色无法定死,能定死(能定死的话一向切个小身形就能够了卡塔 尔(英语:State of Qatar)
平常正是生机勃勃段文案前面拼接叁个三角,三角形很好写

.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

本文由金沙澳门官网网址发布于前端知识,转载请注明出处:移动端样式小技巧

关键词: