HTML5自適應(yīng)布局技術(shù)獨(dú)步天下的今天，table是一個(gè)不鼓勵(lì)使用的HTML標(biāo)記，但現(xiàn)實(shí)工作中，我們避免不了的偶爾會(huì)用到它。那么，怎樣讓一個(gè)傳統(tǒng)的表格也表現(xiàn)出自適應(yīng)性呢？

網(wǎng)上有很多種解決方案，最常見(jiàn)的是配合JavaScript。css-tricks里給出了一個(gè)用純CSS實(shí)現(xiàn)的，但它需要將一些業(yè)務(wù)數(shù)據(jù)寫(xiě)在CSS里。而本文在這里將提到的一種方法也是用純CSS實(shí)現(xiàn)表格的自適應(yīng)布局，而且CSS只負(fù)責(zé)表現(xiàn)，不牽涉業(yè)務(wù)邏輯和數(shù)據(jù)。

例如：

借助偽元素和自定義屬性

我們將借助偽元素 :before 和 :after 的力量。通常， 它們用顯示圖標(biāo)類的內(nèi)容，比如一個(gè)箭頭，提示，或文字圖案(icon)。它的另外一個(gè)神奇的功能是元素屬性值顯示到HTML內(nèi)容里，content: attr(data-label)，放在before/after偽元素類里。沿著這個(gè)思路，我們就能夠讓table在PC端表現(xiàn)成網(wǎng)格效果，而在小屏的手機(jī)端表現(xiàn)成流式布局。

我們暫以600px為小屏幕大屏幕的分界點(diǎn)，下面的CSS使用媒體查詢語(yǔ)句，在小于600px寬的屏幕上，用CSS將td上的屬性值取出來(lái)，放到內(nèi)容區(qū)顯示。

@media screen and (max-width: 600px) {table td:before {content: attr(data-label);float: left;text-transform: uppercase;font-weight: bold;}}

在大屏幕上的顯示效果是這樣：

而到了手機(jī)設(shè)備上，變成了這樣：

說(shuō)明：本篇《自適應(yīng)布局中table元素的自適應(yīng)性》的內(nèi)容采自互聯(lián)網(wǎng)，如有侵權(quán)，請(qǐng)聯(lián)系我們刪除！

、 利用meta標(biāo)簽

Meta標(biāo)簽主要用來(lái)描述一個(gè)HTML網(wǎng)頁(yè)文檔的屬性，如作者、日期時(shí)間、網(wǎng)頁(yè)描述、關(guān)鍵詞、頁(yè)面刷新等，它的Description和Keywords屬性，可加入網(wǎng)站的關(guān)鍵字，讓網(wǎng)頁(yè)利于搜索引擎。

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

解釋：Viewport指用戶網(wǎng)頁(yè)的可視區(qū)域，content中的“width”指的是虛擬窗口寬度，上面代碼意為虛擬窗口/頁(yè)面寬度初始比例為1，最小比例為1，最大比例為1，用戶不可擴(kuò)展，頁(yè)面不可縮放。

以上標(biāo)簽只支持一種尺寸，正確的做法是用js動(dòng)態(tài)生成下面標(biāo)簽，前提是要先獲取屏幕尺寸。

<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.);

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中的百分比中指的是相對(duì)于父元素的寬度。子元素的padding-left：50%，父元素的寬度是百，子元素的margin-top:20%，那么父元素的高是百。body默認(rèn)寬度是屏幕寬度（PC中指的是瀏覽器寬度）子孫元素按百分比定位（或指定尺寸）就可以了。但這只適合布局簡(jiǎn)單的頁(yè)面，復(fù)雜的頁(yè)面實(shí)現(xiàn)很困難。

3、 使用CSS3單位rem

在頁(yè)面載入開(kāi)始時(shí)首先判斷window的寬度（是window的寬度($(window).width())，不是屏幕分辯率的寬度（screen.width），兩者差別請(qǐng)自行查閱），假設(shè)寬度為W，一個(gè)div在寬度為640px的設(shè)計(jì)稿的下的寬度為dW1，如果html的font-size為100px，那么這個(gè)div的寬度用rem表示是多少呢？

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

所以會(huì)在頭部加上這個(gè)JS代碼：

<script type="text/javascript">

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

var rem=html.offsetWidth / 6.4;

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

</script>

4、 媒體查詢

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

以上幾種方法，僅供大家參考。如有不妥，歡迎指正。制作自適應(yīng)頁(yè)面需要比較好的編程基礎(chǔ)和技術(shù)覺(jué)悟，一般的小白，不建議大家為了做自適應(yīng)網(wǎng)頁(yè)專門(mén)學(xué)習(xí)HTML5、CSS3和JS，畢竟這并非一朝一夕就能學(xué)會(huì)的。如果技術(shù)小白想做自適應(yīng)網(wǎng)頁(yè)，這里給大家提供一種思路，用建站寶盒。完全不需要編程基礎(chǔ)，全程拖拽，一樣能做出讓人驚艷的自適應(yīng)網(wǎng)站?，F(xiàn)在還有免費(fèi)建站活動(dòng)，無(wú)論外行內(nèi)行，大家可以注冊(cè)體驗(yàn)一下。

零基礎(chǔ)免費(fèi)做HTML5自適應(yīng)網(wǎng)站：http://www.iisp.com/design/free-site.php?s=yuqiuping