1、 利用meta標簽

Meta標簽主要用(yong)來描述一個(ge)HTML網(wang)頁文檔的(de)屬性，如作(zuo)者(zhe)、日期時間、網(wang)頁描述、關鍵詞、頁面刷新等，它的(de)Description和Keywords屬性，可(ke)加(jia)入(ru)網(wang)站的(de)關鍵字，讓(rang)網(wang)頁利(li)于搜(sou)索引擎。

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

解釋(shi)：Viewport指用(yong)戶網頁的可視(shi)區(qu)域(yu)，content中的“width”指的是虛(xu)(xu)擬窗口寬度(du)，上面(mian)代碼意為虛(xu)(xu)擬窗口/頁面(mian)寬度(du)初始比(bi)(bi)例為1，最小比(bi)(bi)例為1，最大比(bi)(bi)例為1，用(yong)戶不可擴展，頁面(mian)不可縮放(fang)。

以上標(biao)簽(qian)只支(zhi)持一種尺寸，正(zheng)確(que)的(de)做法是(shi)用(yong)js動態生成下面標(biao)簽(qian)，前提(ti)是(shi)要先獲取(qu)屏幕(mu)尺寸。

<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)百分比中指(zhi)的(de)(de)(de)是(shi)相對于父元素(su)(su)的(de)(de)(de)寬(kuan)(kuan)(kuan)度(du)(du)。子元素(su)(su)的(de)(de)(de)padding-left：50%，父元素(su)(su)的(de)(de)(de)寬(kuan)(kuan)(kuan)度(du)(du)是(shi)百，子元素(su)(su)的(de)(de)(de)margin-top:20%，那么父元素(su)(su)的(de)(de)(de)高(gao)是(shi)百。body默認寬(kuan)(kuan)(kuan)度(du)(du)是(shi)屏幕寬(kuan)(kuan)(kuan)度(du)(du)（PC中指(zhi)的(de)(de)(de)是(shi)瀏(liu)覽器寬(kuan)(kuan)(kuan)度(du)(du)）子孫(sun)元素(su)(su)按百分比定位(wei)（或指(zhi)定尺(chi)寸(cun)）就可以了。但這只適合布局簡(jian)單(dan)的(de)(de)(de)頁面，復(fu)雜(za)的(de)(de)(de)頁面實現很困(kun)難。

3、 使用CSS3單位rem

在頁面載(zai)入開(kai)始(shi)時首先判斷window的(de)(de)(de)寬(kuan)度(du)(du)(du)(du)（是window的(de)(de)(de)寬(kuan)度(du)(du)(du)(du)($(window).width())，不是屏幕(mu)分辯率的(de)(de)(de)寬(kuan)度(du)(du)(du)(du)（screen.width），兩者差(cha)別請自行查閱），假設寬(kuan)度(du)(du)(du)(du)為W，一(yi)個div在寬(kuan)度(du)(du)(du)(du)為640px的(de)(de)(de)設計稿的(de)(de)(de)下的(de)(de)(de)寬(kuan)度(du)(du)(du)(du)為dW1，如果html的(de)(de)(de)font-size為100px，那(nei)么這個div的(de)(de)(de)寬(kuan)度(du)(du)(du)(du)用(yong)rem表示是多(duo)少呢？

計算：div寬(kuan)度dW2=dW1/100,px與(yu)rem之間換(huan)算除以(yi)100就可以(yi)，這是假定(ding)屏幕(mu)寬(kuan)度為(wei)640的，而不同寬(kuan)度的屏幕(mu)怎(zen)么處理(li)，為(wei)了能保證換(huan)算容易那就要為(wei)html設置一(yi)個合(he)適的font-size，計算：100 / 640 = fontSize / W, fontSize = W / 640 * 100 = W / 6.4。大多數瀏覽器(qi)font-size的最小值(zhi)為(wei)12px，所(suo)以(yi)只能用100作為(wei)縮放比(bi)例。

所(suo)以會在(zai)頭部加上這個JS代碼：

<script type="text/javascript">

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

   var rem = html.offsetWidth / 6.4;

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

</script>

4、 媒體查詢

媒體(ti)查(cha)詢正是為(wei)解決(jue)網頁(ye)適應手(shou)機屏幕。媒體(ti)查(cha)詢的功(gong)能就是為(wei)不同的“媒體(ti)”設置不同的css樣(yang)式，頁(ye)面尺(chi)寸，設備屏幕尺(chi)寸等，比如我們要為(wei)寬度(du)小于480px的頁(ye)面中的class="icon"的元(yuan)素(su)設置樣(yang)式，可以這樣(yang)寫，@media screen and (max-width=480px) {.icon{ some styles }};具體(ti)可自行研究。

以上幾種方法，僅供大家參考。如有不妥，歡迎指正。制作自適應頁面需要比較好的編程基礎和技術覺悟，一般的小白，不建議大家為了做自適應網頁專門學習HTML5、CSS3和JS，畢竟這并非一朝一夕就能學會的。如果技術小白想做自適應網頁，這里給大家提供一種思路，用建站寶盒。完全不需要編程基礎，全程拖拽，一樣能做出讓人驚艷的自適應網站。現在還有免費建站活動，無論外行內行，大家可以注冊體驗一下。

零基礎免費做HTML5自適應網站：//szjicheng.cn/design/free-site.php?s=yuqiuping