HTML5移動端頁面布局的知識點有哪些

這篇文章主要介紹“HTML5移動端頁面布局的知識點有哪些”，在日常操作中，相信很多人在HTML5移動端頁面布局的知識點有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”HTML5移動端頁面布局的知識點有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習吧！

　　一、 移動設(shè)備和電腦pc端的區(qū)別

　　我們要學(xué)習移動端布局首先要了解“移動端”和“網(wǎng)頁端”布局的不同之處在于哪里？也就是屏幕的尺寸！講到屏幕尺寸我們就不得不提viewport，它是設(shè)備終端用來顯示網(wǎng)頁的那一塊區(qū)域，而非瀏覽器的可視區(qū)域。它可以比瀏覽器可視區(qū)域大可以比可視區(qū)域小，但一般來說移動設(shè)備里的viewport都比可視區(qū)域要來的大。

　　現(xiàn)在的瀏覽都會給提供一個viewport的一個默認的值，一般以980像素居多或者是其他值。根據(jù)對不同平臺下的新版本的瀏覽器做了些測試，通過測試，蘋果手機下的默認viewport為980像素還有安卓移動手機上的瀏覽器，目前主流的最新瀏覽器的viewport也是980像素了。

　　二、 viewport的實際作用

　　因為 viewport的默認值是980像素只適用于PC端而不適用于移動端手機屏幕。因此手機端瀏覽器會出現(xiàn)橫向滾動條。同時要說的是即使是基于980像素的viewport，我們在移動端瀏覽我們的桌面頁面的體驗其實也并不好，所以，一般的，我們會控制viewport來專門給移動端的瀏覽器設(shè)計一個頁面。

　　三、 viewport的實戰(zhàn)設(shè)置

　　現(xiàn)在絕大多數(shù)的瀏覽器里基本都支持對viewport的一個設(shè)置。我們首先來看看viewport的一些屬性，viewport一共有六個可調(diào)試設(shè)置的屬性，它們分別為：

　　width屬性： 設(shè)置layout viewport的寬度，為一個正整數(shù)，或字符串"width-device" （ 一般都是設(shè)置："width-device"）；

　　initial-scale屬性： 設(shè)置頁面的初始縮放值，為一個數(shù)字，可以帶小數(shù)；

　　height屬性： 設(shè)置layout viewport 的高度，這個屬性對我們并不重要，很少使用（一般我們就不用）；

　　maximum-scale屬性： 允許用戶的最大縮放值，是一個數(shù)字，可以帶小數(shù)；

　　minimum-scale屬性： 允許用戶的最小縮放值，是一個數(shù)字，可以帶小數(shù)；

　　user-scalable屬性： 是否允許用戶進行縮放，值為"no"或"yes", no 代表不允許，yes代表允許。

　　下面是我們viewport的書寫案例：（一般不用修改）

　　這樣我們就可以做到對viewport進行控制了。

　　四、 移動端的設(shè)備

　　作為在移動端開發(fā)的程序員來講，如果不了解設(shè)備的一些性能，在開發(fā)上面是非常耗時間的一件事，但同時也帶來負面影響的是項目的進度。

　　下面是一部分移動端設(shè)備的分辨率參數(shù)：

　　可以看出移動端的尺寸都是各不相同的，如果要適配這些尺寸只能通過一定比例來書寫。

　　五、 使用vw布局

　　移動端布局為了適應(yīng)各個設(shè)備的大小，以前都是通過js配合rem做到各個設(shè)備的適應(yīng)，但是使用rem需要對html的fontsize做計算，而這個計算的一個關(guān)鍵點是獲取屏幕寬度，這里的100vw就等于屏幕寬度，這時候如果把這個計算公式放到css去做是不是會完美了，因為為了獲取屏幕寬度不使用js，而用vw來解決這個問題，因為100vw = 屏幕寬度。

到此，關(guān)于“HTML5移動端頁面布局的知識點有哪些”的學(xué)習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習，快去試試吧！若想繼續(xù)學(xué)習更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>