可能有很多人沒有接觸過移動端頁面、或者接觸的少，都會問移動端頁面怎么寫？
寬度百分比，高度自適應可能大家都知道這么個寫法，然后字體再用css3的媒體查詢（@media）來針對每個手機尺寸分別寫不同大小的html字體（我最初就是這么寫的）。
因為寫的頁面多了，覺得這種方法有很多弊端存在，比如手機尺寸很多、不能寫死高度等等。於是去尋找好的方法來統一移動端的寫法，就找到了今天的主題--flexible。
具體的關於flexible的介紹，網上太多太多，自己去百度了解（http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html?utm_source=tuicool&utm_medium=referral）。我主要講一下他的使用和“坑”。
1.head頭部引入flexible.js;
2.head頭部不需要寫<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>；
3.如果設計師給的設計稿是750的寬度，flexible.js默認將寬度分為100份，一份是7.5px,同時認定1rem為10份，即75px。
如果元素寬度在設計稿上為75px，那么就可以寫為1rem;CSSREM是一個CSS的px值轉rem值的Sublime Text3自動完成插件。(下載地址：https://github.com/flashlizi/cssrem)，用cssrem可以提高工作效率。
4.寬度高度用rem,字體單位用px，為什么？
因為字體如果跟着屏幕尺寸自適應的話，那么小屏幕上面字體會非常小，不是我們想要的。我們要iphone4，iphone5,iphone6上面的字體顯示同樣的大小，屏幕大只不過就多顯示一些字。flexible.js完美處理了這個問題，
給html 設置了data-dpr="1,2,3",750寬的屏幕是iphone6的尺寸，data-dpr="2",如果字體大小設計為40px,那么data-dpr="1"下面設置就為20px，data-dpr="3"設置為60px;
less寫法：
.font-dpr(@font-size){ font-size:@font-size; [data-dpr="2"] &{ font-size:@font-size*2; } [data-dpr="3"] &{ font-size:@font-size*3; } }
5.當你寫1px邊框的時候，可能在不同的手機上面，線條的粗細是不一樣的，特別是安卓機上面，線條會特別粗，我們該怎么處理呢？
less寫法：（以上邊框為例）
.setTopLine(@c:#e5e5e5){ position:relative; &:before{ content:""; position:absolute; left:0;top:0;width:100%; height:1px; border-top:1px solid @c; } [data-dpr="1"] &:before { transform-origin: 0 0; -webkit-transform-origin:0 0; transform: scaleY(0.5); -webkit-transform:scaleY(0.5); } }
6.用了flexible你可能會莫名遇到我明明是設置的同樣大小的字體，為什么顯示的大小就是不一樣呢？
原理在這：http://www.cnblogs.com/axl234/p/5895347.html；
給用到的元素加上max-height:999999px;即可解決問題。
暫時碰到問題就這么多，如有疑問歡迎加qq:1191087596,請注明來源。