移动端屏幕适配

[fayching]

适配原则

大屏显示更多内容，文字和间距大小不变，图片等比缩放。

有以下场景：

1. 通栏图片——等比缩放

   iphone5：
   
   iphone6：
   
   iphone6+：
   

   使用了占位组件placehold：http://frozenui.github.io/frozenui/demo/placehold.html

2. icon，文字——大小不变，横向拉伸
   iphone5：
   
   iphone6：
   
   iphone6+：
   

   使用了布局样式layout：http://frozenui.github.io/frozenui/demo/layout.html

3. 多栏图片网格——间距不变，图片等比拉伸
   iphone5：
   
   iphone6：
   
   iphone6+：
   

   使用了网格组件grid：http://frozenui.github.io/frozenui/demo/grid.html

4. 多栏网格——间距不变，横向拉伸
   iphone5：
   
   iphone6：
   
   iphone6+：
   

   使用了网格组件grid：http://frozenui.github.io/frozenui/demo/grid.html

5. 图文——文字和图片的大小不变，间距不变，横向拉伸
   iphone5：
   
   iphone6：
   
   iphone6+：
   

   使用了列表组件list：http://frozenui.github.io/frozenui/demo/list.html

具体效果参考：http://codepen.io/anon/pen/LVQgvB

等比缩放的实现方式

百分比

1. 普通的百分比，适合宽度拉伸

   如grid.css:

   .ui-row {
   display: block;
   overflow: hidden; }
   
   .ui-col {
   float: left;
   box-sizing: border-box;
   width: 100%; }
   
   .ui-col-10 {
   width: 10%; }
   
   .ui-col-20 {
   width: 20%; }
   
   。。。
   
   

2. padding-top百分比，适合图片，宽高都拉伸

   因为 padding 的百分比值是相对于宽度的，也就是有了跟屏幕宽度成正比的条件，所以利用 padding-top 设置与宽高等比的百分比值占位，就实现了同样的效果。

   计算公式： padding-top: 图片高度 * 100% / 图片宽度。

   placehold.css中：

   .ui-placehold-img {
   padding-top: 31.25%;
   position: relative; }
   .ui-placehold-img > span {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     z-index: 1;
     background-repeat: no-repeat;
     -webkit-background-size: cover; }
   

rem

适合图片上的内容，需要一起缩放，或者一些特殊情况

frozenui增加了一个rem.css，body有设置默认的字体大小，所以使不使用不会有影响，sass源码如下：

@mixin queryWidth( $min , $max ){
    @if $min == -1{
        @media screen and ( max-width: $max+px ) {
            html{
                font-size: ( ($max+1) / 375 ) * 100px;
            }
        }
    } @else if $max == -1{
        @media screen and ( min-width: $min+px ) {
            html{
                font-size: ( $min / 375 ) * 100px;
            }
        }
    } @else{
        @media screen and ( min-width: $min+px ) and ( max-width: $max+px ) {
            html{
                font-size: ( $min / 375 ) * 100px;
            }
        }
    }
}
@include queryWidth(-1,319);
@include queryWidth(320,359);
@include queryWidth(360,374);
@include queryWidth(375,383);
@include queryWidth(384,399);
@include queryWidth(400,413);
@include queryWidth(414,-1);

选取了目前主流的屏幕尺寸，如果要求百分百精确要么使用百分比的方式要么使用js计算。

以iphone6的屏幕为基准，px与rem的对应关系为100 : 1。

scale