HTML5移動頁面適配方法

0評論 2017-04-19 18:50:47

收藏 | 點贊

  
之前做過PC頁面時考慮最多的是兼容，這是因為瀏覽器之間的差異引起的。而移動端是基本沒有“兼容”的問題了，全是CSS3，是不是很開心，但是開心早了，因為適配的問題來了，痛哭~~~
  什么是“適配”？簡單除暴點講就是當我們開始做移動端頁面的時候，設(shè)計師給了一份寬度為750px的設(shè)計圖。那么，我們把這份設(shè)計圖實現(xiàn)在各個手機上的過程就是“適配”。
目前移動端做適配有四種方法：
 
一、CSS3媒體查詢
  采用CSS3媒體查詢可以為不同的媒體設(shè)置不同的css樣式，這里的“媒體”包括頁面尺寸，設(shè)備屏幕尺寸等，比如我們要為寬度大于375px的頁面中的class="content"的元素設(shè)置樣式，可以這樣寫，@media screen and (min-width=375px) {.content { styles }};
  移動設(shè)備顯示尺寸大全 之CSS3媒體查詢：
    @media screen and ( min-width: 212px){/*213px顯示屏樣式 LG Optimus One*/}
    @media screen and ( min-width: 319px){/*320px顯示屏樣式 蘋果4/4S/5C/5S黑莓Z30 */}
    @media screen and ( min-width: 359px){/*360px顯示屏樣式 索尼Z1*/}
    @media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ /*兼容iphone6*/ }
    @media screen and ( min-width: 383px){/*384px顯示屏樣式 黑莓Z10 谷歌 Nexus 6 LG Optimus G*/}
    @media screen and ( min-width: 399px){/*399px顯示屏樣式 三星galaxyNote*/}
    @media screen and ( min-width: 414px){/*414px顯示屏樣式 蘋果6plus*/}
    @media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){ /*兼容iphone6+*/ }
    @media screen and ( min-width: 423px){/*424px顯示屏樣式 LG 4X */}
    @media screen and ( min-width: 479px){/*480px顯示屏樣式 索尼MT27i Xperia sola*/}
    @media screen and ( min-width: 539px){/*640px顯示屏樣式 摩托羅拉Droid3/4/Razr Atrix 4g*/}
    @media screen and ( min-width: 639px){/*640px顯示屏樣式*/}
    @media screen and ( min-width: 640px){/*640px以上顯示屏樣式*/}
    @media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5){ /*魅族*/  }
    @media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3){ /*mate7*/  }
    @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){ /* 兼容iphone4/4s */; }
    @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){ /* 兼容iphone5 */; }
 
二、使用meta標簽法
  理論上講使用這個標簽是可以適應(yīng)所有尺寸的屏幕的，但是各設(shè)備對該標簽的解釋方式及支持程度不同造成了不能兼容所有瀏覽器或系統(tǒng)。
  我們先來看看該標簽的含義：
  
  這里的content中的“width” 這個width指的是虛擬窗口的寬度。了解寬度之后，對后續(xù)的各種scale，就應(yīng)該知道是誰與誰的比例，是 虛擬窗口寬度 / 頁面寬度，這樣就會有問題出現(xiàn)，安卓設(shè)備尺寸差異很大，光主流的就有寬度為 320、480、720、1080 等各種尺寸而以上標簽只能支持一種尺寸，當然有些瀏覽器會自動縮放使其適應(yīng)屏幕，但這不是統(tǒng)一標準，正確的做法是用js動態(tài)生成此標簽，當然，應(yīng)該先獲取屏幕尺寸。
  JS核心代碼：
    var phoneWidth =  parseInt(window.screen.width);
    var phoneScale = phoneWidth/750;
    var ua = navigator.userAgent;
    if (/Android (\d+\.\d+)/.test(ua)){
      var version = parseFloat(RegExp.$1);
      if(version>2.3){
        document.write('');
      }else{
       document.write('');
      }
    } else {
     document.write('');
    }
 
三、百分比適配
  用百分比做適配的方法是子元素相對于父元素的百分之多少，比如父元素的寬度為100px;設(shè)置子元素的寬度可為60%;這時子元素的寬為60px;如父元素的寬度改為200px時，這時子元素的寬就是120px; 所以可將body默認寬度設(shè)置為屏幕寬度（PC中指的是瀏覽器寬度），子孫元素按百分比定位（或指定尺寸）就可以了，這只適合布局簡單的頁面，復(fù)雜的頁面實現(xiàn)很困難。
 
四、使用rem來做適配
  rem是將根節(jié)點html的font-size的值作為整個頁面的基準尺寸，默認html的font-size是16px，即1rem=16px，如果某div寬度為32px你可以設(shè)為2rem。當我們把html的font-size設(shè)為20px時，1rem=20px，那么32px=1.6rem了。基于此，我們用rem來實現(xiàn)不同尺寸屏幕的自適應(yīng)的方法就是：在頁面載入開始時首先判斷window的寬度Width（是window的寬度($(window).width())，不是屏幕分辯率的寬度（screen.width）），若假定屏幕寬度為750的，而不同寬度的屏幕處理的處理方法，為了能保證換算容易，需先為html設(shè)置一個合適的font-size，計算：100 / 750 = fontSize / Width, fontSize = Width / 750 * 100 = W / 7.5;
  使用方法：
  1、JS方法
     var html = document.querySelector(‘html‘);
     var rem = html.offsetWidth / 7.5;
     html.style.fontSize = rem + "px";
  2、CSS方法
  在根元素中定義了一個基本字體大小為62.5%（也就是10px。設(shè)置這個值主要方便計算，如果沒有設(shè)置，將是以“16px”為基準 ）。
  html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
  body { font-size: 1.4rem; /*1.4 × 10px = 14px */}
  h1 {font-size: 2.4rem; /*2.4 × 10px = 24px*/}
 
暫時總結(jié)的適配方法就是這四點了，ok，end了~~~

暫無評論