一(yī)般用現在常用的開(kāi)發框架有：目前Web前端最火(huǒ)的框架（BootStrap）、Jquery mobile..當然可能還有一(yī)些移動端開(kāi)發的框架。

移動頁面自适應手機屏幕的方法；

  1，  利用meta标簽

    Meta标簽主要用來描述一(yī)個HTML網頁文檔的屬性，如作者、日期時間、網頁描述、關鍵詞、頁面刷新等，它的Description和Keywords屬性，可加入網站的關鍵字，讓網頁利于搜索引擎。

    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    解釋：Viewport指用戶網頁的可視區域，content中(zhōng)的“width”指的是虛拟窗口寬度，上面代碼意爲虛拟窗口/頁面寬度初始比例爲1，最小(xiǎo)比例爲1，最大(dà)比例爲1，用戶不可擴展，頁面不可縮放(fàng)。

    以上标簽隻支持一(yī)種尺寸，正确的做法是用js動态生(shēng)成下(xià)面标簽，前提是要先獲取屏幕尺寸。

    <script type="text/javascript">

    var phoneWidth =  parseInt(window.screen.width);

    var phoneScale = phoneWidth/640;

    var ua = navigator.userAgent;

    if (/Android (d+.d+)/.test(ua)){var version = parseFloat(RegExp.$1);

    if(version>2.3){ document.write(‘<meta name="viewport" content="width=640, minimum-scale = ‘+phoneScale+‘, maximum-scale = ‘+phoneScale+‘, target-densitydpi=device-dpi">‘); }

    else{document.write(‘<meta name="viewport" content="width=640, target-densitydpi=device-dpi">‘); }

    else { document.write(‘<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">‘); }

     </script>
 2，  百分(fēn)比法

    CSS中(zhōng)的百分(fēn)比中(zhōng)指的是相對于父元素的寬度。子元素的padding-left：50%，父元素的寬度是百，子元素的margin-top:20%，那麽父元素的高是百。body默認寬度是屏幕寬度（PC中(zhōng)指的是浏覽器寬度）子孫元素按百分(fēn)比定位（或指定尺寸）就可以了。但這隻适合布局簡單的頁面，複雜(zá)的頁面實現很困難。

 3，   使用CSS3單位rem

    在頁面載入開(kāi)始時首先判斷window的寬度（是window的寬度($(window).width())，不是屏幕分(fēn)辯率的寬度（screen.width），兩者差别請自行查閱），假設寬度爲W，一(yī)個div在寬度爲640px的設計稿的下(xià)的寬度爲dW1，如果html的font-size爲100px，那麽這個div的寬度用rem表示是多少呢？

    計算：div寬度dW2=dW1/100,px與rem之間換算除以100就可以，這是假定屏幕寬度爲640的，而不同寬度的屏幕怎麽處理，爲了能保證換算容易那就要爲html設置一(yī)個合适的font-size，計算：100 / 640 = fontSize / W, fontSize = W / 640 * 100 = W / 6.4。大(dà)多數浏覽器font-size的最小(xiǎo)值爲12px，所以隻能用100作爲縮放(fàng)比例。

    所以會在頭部加上這個JS代碼：

    <script type="text/javascript">

       var html = document.querySelector(‘html‘);

       var rem = html.offsetWidth / 6.4;

       html.style.fontSize = rem + "px";

 4，  媒體(tǐ)查詢

    媒體(tǐ)查詢正是爲解決網頁适應手機屏幕。媒體(tǐ)查詢的功能就是爲不同的“媒體(tǐ)”設置不同的css樣式，頁面尺寸，設備屏幕尺寸等，比如我(wǒ)們要爲寬度小(xiǎo)于480px的頁面中(zhōng)的class="icon"的元素設置樣式，可以這樣寫，@media screen and (max-width=480px) {.icon{ some styles }};具體(tǐ)可自行研究。

責任編輯：中(zhōng)山網站建設
 【網訊網絡】國家高新技術企業》十年專注軟件開(kāi)發，網站建設，網頁設計，APP開(kāi)發，小(xiǎo)程序，微信公衆号開(kāi)發，定制各類企業管理軟件（OA、CRM、ERP、訂單管理系統、進銷存管理軟件等)！服務熱線：0760-88610046、13924923903，http://www.wansion.net