本文是对移动端多人协作开发项目一些经验总结
1、移动端自适应
2、scope的使用
3、webkit内核两行显示省略号
4、absolute下flex布局失效
1、移动端自适应
正在开发一个APP项目，对于自适应有些体会
在移动端，宽度自适应可以使用百分比来控制，加上flexbox， 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 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 }