屏幕适配
Oaker edited this page on 18 Mar 2016.29 revisions
原文链接：https://github.com/frozenui/frozenui/wiki/%E5%B1%8F%E5%B9%95%E9%80%82%E9%85%8D
适配原则
大屏显示更多内容，文字和间距大小不变，图片等比缩放。
设计稿要求
只需要iphone6的尺寸750*1334的设计稿，一行内显示的内容必须在640的宽度内。
有以下场景：
1.通栏图片----等比缩放
使用了占位组件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;
}2.icon, 文字----大小不变，横向拉伸
使用了网格组件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;
}
3.多栏图片网格----间距不变，图片等比拉伸
使用了网格组件grid:http://frozenui.github.io/frozenui/demo/grid.html
4.多栏网格----间距不变，横向拉伸
使用了网格组件grid:http://frozenui.github.io/frozenui/demo/grid.html
5.图文----文字和图片的大小不变，间距不变，横向拉伸
使用了列表组件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(400,413);
@include queryWidth(414,-1);选取了目前主流的屏幕尺寸，如果要求百分百精准要么使用百分比的方式要么使用js计算。
以iphone6的屏幕为基准，px与rem对应关系为100:1。
补充rem.css如下：
因为px与rem的对应关系为100:1，所以当字体原本尺寸为12px时，当加入rem.css样式文件后，可以使用font-size:0.12rem，这样，字体可以在不同手机分辨率情况下，进行自动缩放。
@media screen and (max-width: 319px){
html{font-size:85.33333px}
}
@media screen and (min-width: 320px) and (max-width: 359px){
html{font-size:85.33333px}
}
@media screen and (min-width: 360px) and (max-width: 374px){
html{font-size:96px}
}
@media screen and (min-width: 375px) and (max-width: 383px){
html{font-size:100px}
}
@media screen and (min-width: 384px) and (max-width: 399px){
html{font-size:102.4px}
}
@media screen and (min-width: 400px) and (max-width: 411px){
html{font-size:106.66667px}
}
@media screen and (min-width: 412px) and (max-width: 413px){
html{font-size:109.86667px}
}
@media screen and (min-width: 414px){
html{font-size:110.4px}
}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);