移動端自適應頁面--flexible

可能有不少人沒有接觸過移動端頁面、或者接觸的少，都會問移動端頁面怎麼寫？

寬度百分比，高度自適應可能你們都知道這麼個寫法，而後字體再用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,請註明來源。