目前,人們使用手機(jī)的頻率越來越高,手機(jī)除了聊天,還能實現(xiàn)網(wǎng)站的瀏覽.那么對于手機(jī)瀏覽網(wǎng)站應(yīng)該如何制作呢?現(xiàn)在的移動設(shè)備網(wǎng)站頁面基本是使用HTML5 移動頁面自適應(yīng)系統(tǒng).

      1、使用meta標(biāo)簽：viewport

      H5移動端頁面自適應(yīng)普遍使用的方法，理論上講使用這個標(biāo)簽是可以適應(yīng)所有尺寸的屏幕的，但是各設(shè)備對該標(biāo)簽的解釋方式及支持程度不同造成了不能兼容所有瀏覽器或系統(tǒng)。

      viewport 是用戶網(wǎng)頁的可視區(qū)域。翻譯為中文可以叫做"視區(qū)"。手機(jī)瀏覽器是把頁面放在一個虛擬的"窗口"（viewport）中，通常這個虛擬的"窗口"（viewport）比屏幕寬，這樣就不用把每個網(wǎng)頁擠到很小的窗口中（這樣會破壞沒有針對手機(jī)瀏覽器優(yōu)化的網(wǎng)頁的布局），用戶可以通過平移和縮放來看網(wǎng)頁的不同部分。

       2、使用css3單位rem

       rem是CSS3新增的一個相對單位（root em，根em）,使用rem為元素設(shè)定字體大小時，是相對大小，但相對的只是HTML根元素。通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。

       目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對于不支持它的瀏覽器多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設(shè)定的字體大小。

       3、使用媒體查詢

       媒體查詢也是css3的方法，我們要解決的問題是適應(yīng)手機(jī)屏幕，這個媒體查詢正是為解決這個問題而生。媒體查詢的功能就是為不同的媒體設(shè)置不同的css樣式，這里的“媒體”包括頁面尺寸，設(shè)備屏幕尺寸等。

       4、使用百分比

       百分比指的是父元素，所有百分比都是這樣的。子元素寬度50%，那么父元素的寬度就是100%；

       所以body默認(rèn)寬度是屏幕寬度（PC中指的是瀏覽器寬度）子孫元素按百分比定位（或指定尺寸）就可以了，這只適合布局簡單的頁面，復(fù)雜的頁面實現(xiàn)很困難。

以上就是“HTML5 移動頁面應(yīng)該如何自適應(yīng)手機(jī)屏幕呢？”的詳細(xì)內(nèi)容，更多請關(guān)注木子天禾科技其它相關(guān)文章！