首頁 > 開發者 > 手機程式開發

h5移動端適配方案

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：func   ret   eve   log   data-   body   屬性   isp   建議   

 

flex布局

flex布局，不使用rem，直接使用px。

<!DOCTYPE html><html><head>    <title></title>    <style>/*利用flex屬性，可以實現區塊層級元素1：1：1*//*簡單的就能使裡面的內容置中（尤其是垂直置中，好用到爆）*/.box{    display: flex;width: 50px;height: 30px;    /*預設 row*/    flex-direction:colum;}.item1{    display: flex;flex:1;    background-color: rgba(213,34,102);    /*justify-content: space-between;*/    justify-content: center;}.item2{    display: flex;flex:1;    background-color: rgba(34,213,102);    align-items:center;    /*    display: block;    line-height: 10px;    height: 10px;*/}.item3{    display: flex;flex:1;    background-color: rgba(102,213,34);    /*垂直置中*/    justify-content: center;    align-items:center;}    </style>}}</head><body><div class="box">    <div class="item1"></div>    <div class="item2"></div>    <div class="item3"></div></div></body></html>
View Code

rem方案

說明：

螢幕根據設計稿的比例轉換對應的rem值(JS會根據不同的裝置添加不同的縮放比(建議內聯處理，在所有資源載入之前執行這個JS))

螢幕根據設計稿的比例轉換對應的rem值，比如：

　　750的設定 = 16*(clientWidth/375)

　　640的設定 = 20*(clientWidth/320)

　　320的設定 = 10*(clientWidth/320)

　　例如：設計稿是750px寬度（基於iphone6 375*2=750 得到的設計稿），如果設計稿中量出某塊地區的margin-top值20px，

　　　　　在實際iphone6裝置375px寬度中，應該除以2，所以得到值mragin-top是20/2=10px,

　　　　　因為1rem=16px（16*（iphone6裝置寬度/375）+‘px‘）,所以對應換算成rem為10/16=0.625rem。

　　　　　css代碼中就是margin-top:0.625rem。

var aa = function(doc, win){    var el = doc.documentElement,//html    console.log(el);    // orientationchange 事件是在使用者水平或者垂直翻轉裝置（即方向發生變化）時觸發的事件。    resizeEvt =(‘orientationchange‘ in win )?‘orientationchange‘:‘resize‘,    recalc = function(){        var clientWidth = el.clientWidth;//clientWidth: 擷取對象可見內容的寬度，不包括捲軸，不包括邊框；        if(!clientWidth){return;}        el.style.fontSize = 16*(clientWidth/375)+‘px‘;    }    if(!doc.addEventListener){return;}    // addEventListener事件方法接受三個參數：第一個是事件名稱比如點擊事件onclick，    // 第二個是要執行的函數，第三個是布爾值    win.addEventListener(resizeEvt,recalc,false);    // 綁定瀏覽器縮放與載入時間    win.addEventListener(‘DOMContentLoaded‘,recalc,false);}(function(doc, win){    var el = doc.documentElement,//html    console.log(el);    // orientationchange 事件是在使用者水平或者垂直翻轉裝置（即方向發生變化）時觸發的事件。    resizeEvt =(‘orientationchange‘ in win )?‘orientationchange‘:‘resize‘,    recalc = function(){        var clientWidth = el.clientWidth;//clientWidth: 擷取對象可見內容的寬度，不包括捲軸，不包括邊框；        if(!clientWidth){return;}        el.style.fontSize = 16*(clientWidth/375)+‘px‘;    }    if(!doc.addEventListener){return;}    // addEventListener事件方法接受三個參數：第一個是事件名稱比如點擊事件onclick，    // 第二個是要執行的函數，第三個是布爾值    win.addEventListener(resizeEvt,recalc,false);    // 綁定瀏覽器縮放與載入時間    win.addEventListener(‘DOMContentLoaded‘,recalc,false);})(document, windo
// 移動端H5終端適配方案var aa = function(doc, win){    var el = doc.documentElement,//html        // orientationchange 事件是在使用者水平或者垂直翻轉裝置（即方向發生變化）時觸發的事件。    resizeEvt =(‘orientationchange‘ in win )?‘orientationchange‘:‘resize‘,    recalc = function(){        var clientWidth = el.clientWidth;//clientWidth: 擷取對象可見內容的寬度，不包括捲軸，不包括邊框；        if(!clientWidth){return;}        el.style.fontSize = 16*(clientWidth/375)+‘px‘;    }    // console.log(el);    if(!doc.addEventListener){return;}    // addEventListener事件方法接受三個參數：第一個是事件名稱比如點擊事件onclick，    // 第二個是要執行的函數，第三個是布爾值    win.addEventListener(resizeEvt,recalc,false);    // 綁定瀏覽器縮放與載入時間    win.addEventListener(‘DOMContentLoaded‘,recalc,false);}(function(doc, win){    var el = doc.documentElement,//html    // orientationchange 事件是在使用者水平或者垂直翻轉裝置（即方向發生變化）時觸發的事件。    resizeEvt =(‘orientationchange‘ in win )?‘orientationchange‘:‘resize‘,    recalc = function(){        var clientWidth = el.clientWidth;//clientWidth: 擷取對象可見內容的寬度，不包括捲軸，不包括邊框；        if(!clientWidth){return;}        el.style.fontSize = 16*(clientWidth/375)+‘px‘;    }    // console.log(el);    if(!doc.addEventListener){return;}    // addEventListener事件方法接受三個參數：第一個是事件名稱比如點擊事件onclick，    // 第二個是要執行的函數，第三個是布爾值    win.addEventListener(resizeEvt,recalc,false);    // 綁定瀏覽器縮放與載入時間    win.addEventListener(‘DOMContentLoaded‘,recalc,false);})(document, window);
View Code

 

rem方案二

引入flexible.js，不需要在html結構中加入viewport標籤。
 flexible.js會在<html>元素上增加一個data-dpr屬性，以及一個font-size樣式。JS會根據不同的裝置添加不同的data-dpr值，
 比如說2或者3同時會給html加上對應的font-size的值，
 比如說75px；以及會添加viewport標籤，JS會根據不同的裝置添加不同的縮放比(建議內聯處理，在所有資源載入之前執行這個JS)

h5移動端適配方案

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關文章
（十）——WebApp
win10提示“無法設定行動熱點 請開啟WLAN”的解決方案
c#通過app.manifest使程式以管理員身份運行
解決Android 6.0擷取wifi Mac地址為02:00:00:00:00:00問題【轉】
Android TextView加底線的幾種方式
《Android應用效能最佳化》 第8章 圖形

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More