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

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

　　一、 移動設備和電腦pc端的區別

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

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

　　二、 viewport的實際作用

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

　　三、 viewport的實戰設置

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

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

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

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

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

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

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

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

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

　　四、 移動端的設備

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

　　下面是一部分移動端設備的分辨率參數：

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

　　五、 使用vw布局

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

到此，關于“HTML5移動端頁面布局的知識點有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！