移动端自适应页面--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,请注明来源。