資訊專欄INFORMATION COLUMN
摘要：背景現在工作中有超過一半的時間用于移動端項目的開發，包括嵌入頁，微信頁面和移動頁。經過研究，我在公司的多個移動端項目使用了布局來解決移動端自適應布局的問題。簡單的說它就是一個相對單位，布局是一個流行的解決移動端響應式布局的方案。
背景
現在工作中有超過一半的時間用于移動端項目的開發，包括app嵌入頁，微信頁面和移動wap頁。
開發移動端頁面跟開發PC頁面的一個大區別就是移動端對響應式布局的要求更高，不能像PC頁面一樣設計幾個斷點利用媒體查詢，兩邊留空白就解決。移動端頁面需要把屏幕空間都利用上，而移動設備的尺寸和分辨率多種多樣，解決移動端頁面的自適應布局問題是搭建新的移動端項目的重點和難點。
經過研究，我在公司的多個移動端項目使用了REM布局來解決移動端自適應布局的問題。
REM介紹rem（font size of the root element）是指相對于根元素的字體大小的單位。簡單的說它就是一個相對單位，rem布局是一個流行的解決移動端響應式布局的方案。在頁面初始化時，使用JS根據屏幕的尺寸和dpr等信息設置rem的大小，而在css中寫下元素的高度等信息時，使用rem。如將rem設置為100px，則元素的高度為36px時，需要將元素的高度寫成0.36rem。字體大小可能需要寫成0.12rem等，可讀性較差，輸入起來也不方便，降低了工作效率。
解決方案在webpack中使用px2rem-loader。用法如下
rules: [
{
test: /.css$/,
use: ["style-loader", "css-loader", "px2rem-loader?remUnit=75&remPrecision=8"]
}
]
這樣便可以應對常見的750px的設計圖，直接按照設計圖的尺寸來填寫屬性大小就好，
注意，還需要在html文件中引入flexible文件
踩到的坑
微信瀏覽器如果退回的話，頁面被緩存，但是js文件沒有重新調用，會導致布局混亂。需要調用pageshow事件來解決
e.addeventListener("pageshow", function(e) {
// d的作用是重新設置documentElement的fontsize為clientWidth的1/10
e.persisted&&d()
})
深入了解
你也許會對flexible.js做了什么比較感興趣。在這之前，需要簡單了解一下viewport的知識
viewport meta標簽有六個屬性
width：設置layout viewport 的寬度，為一個正整數，或字符串”width-device”
initial-scale：設置頁面的初始縮放值，為數字，可帶小數
minimum-scale： 允許用戶的最小縮放值，為數字，可帶小數
maximum-scale：允許用戶的最大縮放值，為數字，可帶小數
height 設置layout viewport 的高度
user-scalable 是否允許用戶進行縮放，值為”no”或”yes”
layout viewport 布局視窗
網站的寬度，可以通過document.documentElement.clientWidth獲取，通過viewport meta標簽設置
visual viewport——視覺視窗
代表瀏覽器可視區域的大小，可以通過 document.documentElement.innerWidth來獲取
ideal viewport——理想視窗
跟移動設備相關的viewport，移動設備的寬度。iPhone的值是320
visual viewport width = ideal viewport width / zoom factor
zoom factor可以設置initial-scale來控制
當visual viewport = layout viewport時，頁面無水平滾動條，剛好顯示全部內容
如果不設置initial-scale，通過設置viewport meta的width為device-width，可以令layout viewport等于ideal viewport，從而達到頁面無水平滾動條的效果
獲取dpr和設置dpr的倒數scale
動態生成viewport meta，initial-scale值為scale
設置rem為clientWidth(layoutview port width) 的1 / 10
這時我們我們開發項目只要注意屏幕的寬度是10rem就可以了
最后其實REM方案主要還是以clientWidth的1/10為基本單位設置元素的尺寸來達到自適應的目的?？梢允褂肰W來代替，也有px2vw之類的插件。
要達到自適應布局，還可以使用百分比、flex布局或是grid布局，這里就不細說了。
本文章為前端進階系列的一部分,
歡迎關注和star本博客或是關注我的github
px2rem
移動前端開發之viewport的深入理解
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107668.html
摘要：本文同步發布于我的個人博客上移動端自適應布局不管是面試還是工作過程中，移動端的布局都比較常見，而移動端適配方法也是多種多樣。表示當前視口寬度的百分之一。同時在移動端，的兼容性還不錯，完全可以直接使用。這樣完成了一個簡單好用的移動端布局了 本文同步發布于我的個人博客上 - vw+rem移動端自適應布局 不管是面試還是工作過程中，移動端的布局都比較常見，而移動端適配方法也是多種多樣。一般來...
摘要：已更新強力推薦移動端自適應解決方案與仿原生超高清超細膩解決方案新增了功能，開啟了功能后，可以自動設置設備尺寸為物理分辨率使網頁達到原生精細效果。 已更新 - 強力推薦 (移動端自適應解決方案與仿原生APP超高清超細膩解決方案)https://gitlab.com/fekits/mc-... v1.1.0 [Latest version] 1、新增了dpr功能，開啟了DPR功能后，可以...
閱讀 2684·2021-10-22 09:55
閱讀 2008·2021-09-27 13:35
閱讀 1267·2021-08-24 10:02
閱讀 1478·2019-08-30 15:55
閱讀 1198·2019-08-30 14:13
閱讀 3471·2019-08-30 13:57
閱讀 1975·2019-08-30 11:07
閱讀 2447·2019-08-29 17:12
