本文是对移动端多人协作开发项目一些经验总结
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像素，当然继续缩放会有什么效果参考
《再谈移动端适配和点5像素的由来》
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 }
原标题：前端移动端开发经验总结
关键词：前端
我知道了 