东西比较零散，所以直接理一理。
这些东西都是自己写的，如果有问题，请轻拍！
1. iphone VS ipad
吐槽先，之前做了一版，因为iphone和ipad要用同一个页面，所以我傻兮兮的给iphone和ipad分别做样式，光css的行数就已经不忍直视了。
后来！！ 要改样式！！！ 当时我的内心的小人就在呐喊，oh！ no！！！
后来想出了个非常赞的解决方法，哈哈哈。
思路就是确定iphone和ipad内容部分宽度的大小，之间形成等比例关系，然后只要弄好iphone的样式，ipad的样式只要修改em就可了。
上关键点
设置rem
html{
font-size: 100px;//此时em('body'的字体大小)也为100px;因为'html'是父元素，'body'是子元素
}-
判断iphone还是ipad
<script>
getType();
function getType(){
var body = document.querySelector('body');
// alert(body);
if(navigator.userAgent.indexOf("iPhone") != -1) {
body.style.fontSize = "50px";} if(navigator.userAgent.indexOf("iPad") != -1){ } }; </script> <!-- 判断iphone还是ipad结束 --> html部分限定内容宽度
<div class="wrap"></div>
2. 所有尺寸根据屏幕大小重新计算
思路：通过读取屏幕宽度后，计算rem的值。
备注：不适合精细活，因为在适应屏幕重新计算时，小的地方会有些偏差，比如理论上来说有个图片应该是垂直居中的，但经过重新计算后，就有可能有点歪了。
在安卓手机上用过这个办法，ok。(吐个槽，安卓的分辨率要不要这么多啊，所以就这么办了！)
//css部分
html{font-size:100px;}//设置为100px只是为了便于计算
//js部分
var wrap_w = document.documentElement.clientWidth;
var html = document.querySelector('html');
caculate(wrap_w);
//尺寸适应
window.onresize = function(){
var new_wrap_w = document.documentElement.clientWidth;
if(new_wrap_w < wrap_w){
wrap_w = new_wrap_w;
caculate(wrap_w);
}
}
function caculate(wrap_w){
var wrap_w = document.documentElement.clientWidth;
if(wrap_w > 980){ //980是内容宽度，也就是'wrap'设置的宽度
wrap_w = 980;
}
var fs = parseInt(wrap_w/9.8);
html.style.fontSize = fs + 'px';
}
3. 宽度按照百分比，高度固定
我发现这种还是比较实用的，高度固定后，写起来方便多了。至少垂直方向不会有啥偏的了。
在iphone上用过这个办法，ok。
就是类似这种css
.test{width:20%;height:50px;}
收工！
