本文是对移动端多人协作开发项目一些经验总结
1、移动端自适应
2、scope的使用
3、webkit内核两行显示省略号
4、absolute下flex布局失效
1、移动端自适应
正在开发一个APP项目,对于自适应有些体会
在移动端,宽度自适应可以使用百分比来控制,加上flexbox,width: 20%;
但是对于高度无能为力,后来发现大厂(淘宝,网易)推崇rem,这是CSS3新定义的,和传统的px,em不一样,rem是相对于根元素
<html>的font-size来定义的,默认1rem = 16px,如果自定义了font-size
html {
font-size: 12px;
}
这时,1rem = 12px。这样对于高度可以通过rem来设置,不需要px
1 .section{
2 width:25%;
3 height:48px;
4 background-color: greenyellow;
5 }
1 .section{
2 width:25%;
3 height:3rem;
4 background-color: royalblue;
5 }
发现3rem = 48px,因为没有设置html的font-size
移动端最重要的是设备像素比dpr不同,常用的设计稿是750px,是iPhone6的物理像素,独立像素为375px,所以dpr=2
具体方案参照《使用Flexible实现手淘H5页面的终端适配》
另外一个就是随处可见的border,因为设备像素比不同,我们设置的1px,是设备独立像素,例如iPhone6的Retina屏
设备会使用4个像素点2x2,去显示1个像素点,即1像素border会变成2像素border
在Chrome中输出,发现屏幕是高清屏
可以看出左边border比右边宽,再在iPhone6的屏幕下查看
更清晰的发现右边的边框为1像素,左边的不是
1 @mixin border-1px($color) {
2 position: relative;
3
4 &:after {
5 display: block;
6 position: absolute;
7 left: 0;
8 bottom: 0;
9 width: 100%;
10 height: 100%;
11 border: 1px solid $color;
12 content: ' ';
13 }
14 }
15
16 @mixin border-1px-two($color) {
17 position: relative;
18
19 &:before {
20 content: '';
21 position: absolute;
22 width: 200%;
23 height: 200%;
24 border: 1px solid #000;
25 transform-origin: 0 0;
26 transform: scale(0.5, 0.5);
27 box-sizing: border-box;
28 }
29 }
30
31 .section, .footer {
32 width: 20%;
33 height: 2rem;
34 margin-right:3px;
35 }
36
37 .section {
38 @include border-1px(red);
39 }
40
41 .footer {
42 @include border-1px-two(green);
43 }
以上是网上的两种解决方案,结果证明只有通过缩放才能达到1像素,当然继续缩放会有什么效果参考
2、scope的使用
HTML5 新元素scope,范围样式,已经在团队协作中广泛使用
<style scoped>
个人开发可以在HTML中任何地方使用,限制样式只在元素及子元素生效,在Chrome查看
可以看到,scoped给下面写的样式,均添加了一个[data-v-*]来限制样式作用域,再看一个
在scoped下可以使用任何css样式,包括预处理器的所有特性
3、webkit内核两行显示省略号
文本限制在一行显示,注意需要直接写在标签上,写在父元素没有效果
1 <section class="section">
2 <p>
3 用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)
4 用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)
5 用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)
6 </p>
7 </section>
1 .section {
2 background-color: #999; // 自定义
3 height:20px; // 自定义
4 overflow: hidden; // 必须写
5 text-overflow: ellipsis; // 必须写
6 white-space: nowrap; // 必须写
7 }
发现没有显示省略号,删除p标签,或者将样式写到p上
在移动端绝大数浏览器都是webkit内核,可以使用私有属性-webkit-line-clamp
来限制显示的行数,还需要结合其他属性才能实现效果
1 .section {
2 background-color: #999; /*自定义*/
3 overflow : hidden;
4 text-overflow: ellipsis;
5 display: -webkit-box; /*必须结合的属性 ,将对象作为弹性伸缩盒子模型显示*/
6 -webkit-line-clamp: 2; /*必须结合的属性 ,用来限制在一个块元素显示的文本的行数*/
7 -webkit-box-orient: vertical; /*必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式,
8 vertical:设置伸缩盒对象的子元素从上到下纵向排列*/
9 }
4、absolute下flex布局失效
FlexBox在移动端表现还是不错的,尤其对于多列布局,不需要传统的float或者inline-block
1 <header class="header">
2 <div>1</div>
3 <div>2</div>
4 </header>
1 .header{
2 display: flex;
3 justify-content: space-between;
4
5 :first-child {
6 width:30%;
7 height:100px;
8 border:1px solid red;
9 }
10
11 :last-child{
12 width:30%;
13 height:100px;
14 background-color: green;
15 }
16 }
如图所示,多列可以自适应,后来需求变动,需要将footer定位在底部,并且中间内容是可以滚动的
1 <!--可以滚动的区域-->
2 <section class="section">
3 <header class="header">
4 <div>1</div>
5 <div>2</div>
6 </header>
7 </section>
8 <!--fixed定位的底部-->
9 <footer class="footer"></footer>
1 .section {
2 position: absolute;
3 }
发现flex失效,后来经过研究发现,position: absolute;会导致宽度失效,只会展现内容撑开的高度
只需要设定宽度100%,或者left,right为0
1 .section {
2 position: absolute;
3 width: 100%;
4 /*left: 0;*/
5 /*right: 0;*/
6 }