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

移動頁面自(zì)适應手機屏幕的(de)方法；

  1，  利用meta标簽

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

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

    解釋：Viewport指用戶網頁的(de)可(kě)視(shì)區域，content中的(de)“width”指的(de)是虛拟窗口寬度，上面代碼意為(wèi)虛拟窗口/頁面寬度初始比例為(wèi)1，最小比例為(wèi)1，最大比例為(wèi)1，用戶不可(kě)擴展，頁面不可(kě)縮放。

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

    <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，  百分比法

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

 3，   使用CSS3單位rem

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

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

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

    <script type="text/javascript">

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

       var rem = html.offsetWidth / 6.4;

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

 4，  媒體查詢

    媒體查詢正是為(wèi)解決網頁适應手機屏幕。媒體查詢的(de)功能就是為(wèi)不同的(de)“媒體”設置不同的(de)css樣式，頁面尺寸，設備屏幕尺寸等，比如(rú)我們要為(wèi)寬度小于480px的(de)頁面中的(de)class="icon"的(de)元素設置樣式，可(kě)以這樣寫，@media screen and (max-width=480px) {.icon{ some styles }};具體可(kě)自(zì)行研究。

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