東西比較零散，所以直接理一理。
這些東西都是自己寫的，如果有問(wèn)題，請(qǐng)輕拍！

1. iphone VS ipad

吐槽先，之前做了一版，因?yàn)閕phone和ipad要用同一個(gè)頁(yè)面，所以我傻兮兮的給iphone和ipad分別做樣式，光css的行數(shù)就已經(jīng)不忍直視了。
后來(lái)??！ 要改樣式?。?！ 當(dāng)時(shí)我的內(nèi)心的小人就在吶喊，oh！ no！??！
后來(lái)想出了個(gè)非常贊的解決方法，哈哈哈。

思路就是確定iphone和ipad內(nèi)容部分寬度的大小，之間形成等比例關(guān)系，然后只要弄好iphone的樣式，ipad的樣式只要修改em就可了。

上關(guān)鍵點(diǎn)

• 設(shè)置rem
  html{
  font-size: 100px;//此時(shí)em('body'的字體大小)也為100px;因?yàn)?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結(jié)束 -->
  

• html部分限定內(nèi)容寬度
  
  <div class="wrap"></div>

2. 所有尺寸根據(jù)屏幕大小重新計(jì)算

思路：通過(guò)讀取屏幕寬度后，計(jì)算rem的值。
備注：不適合精細(xì)活，因?yàn)樵谶m應(yīng)屏幕重新計(jì)算時(shí)，小的地方會(huì)有些偏差，比如理論上來(lái)說(shuō)有個(gè)圖片應(yīng)該是垂直居中的，但經(jīng)過(guò)重新計(jì)算后，就有可能有點(diǎn)歪了。
在安卓手機(jī)上用過(guò)這個(gè)辦法，ok。(吐個(gè)槽，安卓的分辨率要不要這么多啊，所以就這么辦了！)

  //css部分
  html{font-size:100px;}//設(shè)置為100px只是為了便于計(jì)算

  //js部分
  var wrap_w = document.documentElement.clientWidth;
  var html = document.querySelector('html');   
  caculate(wrap_w);

  //尺寸適應(yīng)
  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是內(nèi)容寬度，也就是'wrap'設(shè)置的寬度
        wrap_w = 980;
    }
    var fs = parseInt(wrap_w/9.8);
    html.style.fontSize = fs + 'px';
  } 

3. 寬度按照百分比，高度固定

我發(fā)現(xiàn)這種還是比較實(shí)用的，高度固定后，寫起來(lái)方便多了。至少垂直方向不會(huì)有啥偏的了。
在iphone上用過(guò)這個(gè)辦法，ok。
就是類似這種css

.test{width:20%;height:50px;}

收工！