HTML5移動頁面適配方法

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

收藏 | 點(diǎn)贊

  
之前做過PC頁面時考慮最多的是兼容，這是因?yàn)闉g覽器之間的差異引起的。而移動端是基本沒有“兼容”的問題了，全是CSS3，是不是很開心，但是開心早了，因?yàn)檫m配的問題來了，痛哭~~~
  什么是“適配”？簡單除暴點(diǎn)講就是當(dāng)我們開始做移動端頁面的時候，設(shè)計(jì)師給了一份寬度為750px的設(shè)計(jì)圖。那么，我們把這份設(shè)計(jì)圖實(shí)現(xiàn)在各個手機(jī)上的過程就是“適配”。
目前移動端做適配有四種方法：
 
一、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標(biāo)簽法
  理論上講使用這個標(biāo)簽是可以適應(yīng)所有尺寸的屏幕的，但是各設(shè)備對該標(biāo)簽的解釋方式及支持程度不同造成了不能兼容所有瀏覽器或系統(tǒng)。
  我們先來看看該標(biāo)簽的含義：
  
  這里的content中的“width” 這個width指的是虛擬窗口的寬度。了解寬度之后，對后續(xù)的各種scale，就應(yīng)該知道是誰與誰的比例，是 虛擬窗口寬度 / 頁面寬度，這樣就會有問題出現(xiàn)，安卓設(shè)備尺寸差異很大，光主流的就有寬度為 320、480、720、1080 等各種尺寸而以上標(biāo)簽只能支持一種尺寸，當(dāng)然有些瀏覽器會自動縮放使其適應(yīng)屏幕，但這不是統(tǒng)一標(biāo)準(zhǔn)，正確的做法是用js動態(tài)生成此標(biāo)簽，當(dāng)然，應(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默認(rèn)寬度設(shè)置為屏幕寬度（PC中指的是瀏覽器寬度），子孫元素按百分比定位（或指定尺寸）就可以了，這只適合布局簡單的頁面，復(fù)雜的頁面實(shí)現(xiàn)很困難。
 
四、使用rem來做適配
  rem是將根節(jié)點(diǎn)html的font-size的值作為整個頁面的基準(zhǔn)尺寸，默認(rèn)html的font-size是16px，即1rem=16px，如果某div寬度為32px你可以設(shè)為2rem。當(dāng)我們把html的font-size設(shè)為20px時，1rem=20px，那么32px=1.6rem了。基于此，我們用rem來實(shí)現(xiàn)不同尺寸屏幕的自適應(yīng)的方法就是：在頁面載入開始時首先判斷window的寬度Width（是window的寬度($(window).width())，不是屏幕分辯率的寬度（screen.width）），若假定屏幕寬度為750的，而不同寬度的屏幕處理的處理方法，為了能保證換算容易，需先為html設(shè)置一個合適的font-size，計(jì)算：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è)置這個值主要方便計(jì)算，如果沒有設(shè)置，將是以“16px”為基準(zhǔn) ）。
  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é)的適配方法就是這四點(diǎn)了，ok，end了~~~

暫無評論