1、
下面是我們經常用到的一些標籤，由於瀏覽器的差異，並不能百分百相容。
2、百分比法，css中的百分比中的百指的是父元素，所有百分比都是這樣的。子元素寬度50%，那麼父元素的寬度就是百，子元素的padding-left：50%，父元素的寬度是百，子元素的margin-top:20%，那麼父元素的高是百。所以body預設寬度是螢幕寬度（pc中指的是瀏覽器寬度）子孫元素按百分比定位（或指定尺寸）就可以了，這只適合布局簡單的頁面，複雜的頁面實現很困難。
3、使用css3單位rem，有人這樣解釋rem，root-em，就是根部的em，想必em大家都懂的，那麼rem就是將根節點html的font-size的值作為整個頁面的基準尺寸，預設html的font-size是16px，即1rem=16px，如果某div寬度為32px你可以設為2rem。當我們把html的font-size設為20px時，1rem=20px，那麼32px=1.6rem了。到這裡我們也就了解了rem的用法了，那麼怎麼用rem來實現不同尺寸螢幕的自適應呢？在頁面載入開始時首先判斷window的寬度（是window的寬度($(window).width())，不是螢幕分辯率的寬度（screen.width）），假設寬度為w，乙個div在寬度為640px的設計稿的下的寬度為dw1，這樣如果html的font-size為100px，那麼這個div的寬度用rem表示是多少呢？計算：div寬度dw2=dw1/100,px與rem之間很好換算，除以100就可以，這是假定螢幕寬度為640的，而不同寬度的螢幕怎麼處理，為了能保證換算容易那就要為html設定乙個合適的font-size，計算：100 / 640 = fontsize / w, fontsize = w / 640 * 100 = w / 6.4;
4、**查詢，**查詢也是css3的方法，我們要解決的問題是適應手機螢幕，這個**查詢正是為解決這個問題而生，**查詢的功能就是為不同的**設定不同的css樣式，這裡的「**」包括頁面尺寸，裝置螢幕尺寸等，比如我們要為寬度小於480px的頁面中的class="icon"的元素設定樣式，可以這樣寫，@media screen and (max-width=480px) };
參考：
HTML5移動端自適應的方法介紹
現在很多專案都需要做響應式或者自適應的來適應我們不同螢幕尺寸的手機，電腦等裝置，本文就來為大家介紹一下html5移動端自適應的方法。螢幕自適應方案 介紹方案之前，首先還是交代一下專案背景與需求，畢竟一切方案也不能脫離實際需求。需求與背景 自適應方案 rem flexible rem font siz...
移動頁面HTML5自適應手機螢幕寬度
標籤 網上關於這方面的文章有很多，重複的東西本文不再贅述，僅提供思路，並解釋一些其他文章講述模糊的地方。1 使用meta標籤，這也是普遍使用的方法，理論上講使用這個標籤是可以適應所有尺寸的螢幕的，但是各裝置對該標籤的解釋方式及支援程度不同造成了不能相容所有瀏覽器或系統。首先解釋該標籤的含義 解釋 c...
移動頁面HTML5自適應手機螢幕寬度
網上關於這方面的文章有很多，重複的東西本文不再贅述，僅提供思路，並解釋一些其他文章講述模糊的地方。1 使用meta標籤，這也是普遍使用的方法，理論上講使用這個標籤是可以適應所有尺寸的螢幕的，但是各裝置對該標籤的解釋方式及支援程度不同造成了不能相容所有瀏覽器或系統。首先解釋該標籤的含義 解釋 cont...