本文是對移動端多人協作開發項目一些經驗總結
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 }