屏幕适配

Oaker edited this page Mar 18, 2016 · 29 revisions

适配原则

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

设计稿要求

只需要输出iphone6的尺寸750*1334 的设计稿,一行内显示的内容必须在640的宽度内。

有以下场景:

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

iphone5:

iphone5_01

iphone6:

iphone6_01

iphone6+:

iphone6p_01

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

主要代码:

.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; }
  1. icon,文字——大小不变,横向拉伸

iphone5:

iphone5_02

iphone6:

iphone6_02

iphone6+:

iphone6p_02

使用了网格组件grid和布局组件layout:

http://frozenui.github.io/frozenui/demo/grid.html

http://frozenui.github.io/frozenui/demo/layout.html

主要使用flex布局实现:

.ui-row-flex {
  display: -webkit-box;
  width: 100%;
  -webkit-box-sizing: border-box; }
  .ui-row-flex .ui-col {
    float: none;
    -webkit-box-flex: 1;
    width: 0; }
  .ui-row-flex .ui-col-2 {
    -webkit-box-flex: 2; }
  .ui-row-flex .ui-col-3 {
    -webkit-box-flex: 3; }
  .ui-row-flex .ui-col-4 {
    -webkit-box-flex: 4; }
.ui-flex,
.ui-tiled {
 display: -webkit-box;
 width: 100%;
 -webkit-box-sizing: border-box; }
.ui-tiled li {
 -webkit-box-flex: 1;
 width: 100%;
 text-align: center;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-box-pack: center;
 -webkit-box-align: center; }
  1. 多栏图片网格——间距不变,图片等比拉伸

iphone5:

iphone5_03

iphone6:

iphone6_03

iphone6+:

iphone6p_03

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

  1. 多栏网格——间距不变,横向拉伸

iphone5:

iphone5_04

iphone6:

iphone6_04

iphone6+:

iphone6p_04

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

  1. 图文——文字和图片的大小不变,间距不变,横向拉伸

iphone5:

iphone5_05

iphone6:

iphone6_05

iphone6+:

iphone6p_05

使用了列表组件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%; }

。。。

  1. 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。

js+css scale的方式

还有一种场景,翻屏活动,每一页内容必须完全显示,这就要求内容在所有屏幕大小都能适应,如果只是背景使用background-size: cover即可,内容可能就需要用到scale的缩放:

大于视觉稿的宽高比时按高度缩放,左右居中,小于宽高比时按宽度缩放,上下居中,代码如下:

var autoScale = function() {
    var ratio = 320/520, //视觉稿宽高比,使用iphone5的大小减掉tabbar
        winW = document.documentElement.clientWidth,
        winH = document.documentElement.clientHeight,
        ratio2 = winW/winH,
        scale;
        if (ratio < ratio2) {
            scale = (winH/520).toString().substring(0, 6);
        } else {
            scale = (winW/320).toString().substring(0, 6);
        }
    var cssText = '-webkit-transform: scale('+ scale +'); -webkit-transform-origin:center center; opacity:1;';
    $('.page').attr('style', cssText);

};

setTimeout(function() {
        autoScale();
}, 300);