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