【技術】移動端適配 px2rem/px2vw 的原理與實現

AlexTuan 發布于2019-08-22 18:41 / 966人閱讀

摘要：不同的前端框架，配合等打包工具，可以更高效的使用這些插件，完成移動端適配的配置工作。

簡介

【目標】：前端開發移動端及H5時候，不需要再關心移動設備的大小，只需要按照固定設計稿的px值布局！
【基礎】

dpr（設備像素比）
css的像素px不等于設備像素/分辨率/各種值，css的px可以簡單理解為虛擬像素，與設備無關，css的px需要乘dpr計算為設備像素；

css3 的 rem，
即“root em”，是相對于根元素的font-size來做計算；
配合js根據設備的dpr設置html的font-size=“XX”來實現等比縮放

基于 viewport 的長度單位：
vw：即Viewport"s width,1vw等于window.innerWidth的1%，所以窗口寬度是100vm
vh：和vw類似，即Viewport"s height，1vh等于window.innerHeihgt的1%
vmin：vmin的值是當前vw和vh中較小的值
vmax：vmax的值是當前vw和vh中較大的值

實現

總體來說是將px通過預定義的配置，根據不同的dpr計算為rem/vw，來實現不同屏幕大小的響應式伸縮

1. px 轉 rem

css3的rem是基于根元素的字體大小計算的尺寸單位，所以通過改變html的font-size來實現rem的響應式布局，例如使用css媒體查詢：

html{font-size:10px}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}

但不同分辨率的屏幕計算轉換太復雜，媒體查詢不能兼顧所有的尺寸，所以可以通過JS計算。先貼代碼：

var deviceWidth=document.documentElement.clientWidth;
document.documentElement.style.fontSize =deviceWidth / bodyRemWidth + "px";

例如設計稿基于iphone5的320px，deviceWidth為320px，根元素的font-size基于100px，那body的width可以寫為3.2em；
當適配640px的屏幕時，deviceWidth為640px，bodyRemWidth為3.2rem，此時根元素的font-size計算為200px；
deviceWidth就是viewport設置中的deviceWidth,viewport視圖提供布局的窗口，包括移動端的顯示/縮放比例等設置；
需要設置mate的viewport使得顯示時的頁面寬度等于設備邏輯像素大小，移動端常用代碼：

deviceWidth=設備邏輯像素/(dpr * scale)；
dpr為固定值，高清屏一般為dpr=2，所以scale=1/dpr，js動態設置scale：

var scale = 1 / devicePixelRatio;
document.querySelector("meta[name="viewport"]")
    .setAttribute("content","initial-scale=" + scale + ", 
    maximum-scale=" + scale + ", 
    minimum-scale=" + scale + ", 
    user-scalable=no");

2. 進階：px 轉 vw

方式簡而言之就是，基于css3中Viewport相關vw、vh、vmin和vmax單位，將寬高的px計算為vw/vh，而vmax/vmin總是指向那個最大/最小的屏幕長度

var vw = window.innerWidth; 
var vh = window.innerHeight;

例如對于320px的設計稿，屏幕總長一直是100vw，所以比率是3.2，那css代碼需要將所有--px/3.2得到**vm，
這樣很麻煩，所以使用postcss-px-to-viewport實現編譯時候的自動計算,還要配合postcss-write-svg,postcss-aspect-ratio-mini等插件解決Retina，1px等問題

3. 再進階：兼容 vw

目前應用比較廣的是px2rem，隨著瀏覽器對viewport的支持，但未來趨勢是px2vm，用vm代替rem，但要兼容就大亂燉啥都要，，，
很多技術站都提供了兼容插件，比如postcss-cssnext, postcss-viewport-units, viewport-units-buggyfill。
不同的前端框架vue/react，配合webpack/grund等打包工具，可以更高效的使用這些插件，完成移動端適配的配置工作。
【傳送門】
Amfe阿里前端團隊一直都對這方面的技術做了非常好的研究，還提供了開源的代碼：https://github.com/amfe/lib-f...
大漠寫的非常詳細的博客：使用Flexible實現手淘H5頁面的終端適配，還有進一步講vw的：再聊移動端頁面的適配，如何在Vue項目中使用vw實現移動端適配。向大牛獻上一份膝蓋～～～

4. 推薦插件

主要的插件都是基于PostCss的，千萬不要去百度PostCss，要不然從當前坑還沒爬出來，又會發現另一個坑，，，

px2rem或postcss-px2rem：將css中px編譯為rem，配合js根據不同的dpr，修改meta的viewport值和html的font-size

postcss-px-to-viewport：將css中px編譯為vm

postcss-aspect-ratio-mini：用來處理元素容器寬高比，針對img、vedio和iframe實現更好的長寬比

postcss-write-svg：解決1px問題（移動端css里面寫了1px, 實際看起來比1px粗），自動生成border-image或者background-image的圖片

viewport-units-buggyfill：實現各個瀏覽器viewport的兼容

postcss-viewport-units：給CSS的屬性添加content的屬性，配合viewport-units-buggyfill庫給vw、vh、vmin和vmax做適配的

加油吧～少年～

GPU云服務器云服務器移動端適配移動端適配方案移動端適配 js 回調的原理、實現與應用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96093.html

前端資源收集整理

摘要：工作原因，最近一年斷斷續續寫了一點前端代碼，收集整理了一些資料，和大家共享。工作原因，最近一年斷斷續續寫了一點前端代碼，收集整理了一些資料，和大家共享。 Github版本：Front-End Resource Collection 前端相關資源匯總學習指導精華文章 Web前端的路該怎么走？：文章超長，但是干貨超級多，值得反復精讀！聽說2017你想寫前端？：適合于已經度過了小白階...

awesome23 2019-08-20 18:23 評論0 收藏0
前端資源收集整理

摘要：工作原因，最近一年斷斷續續寫了一點前端代碼，收集整理了一些資料，和大家共享。工作原因，最近一年斷斷續續寫了一點前端代碼，收集整理了一些資料，和大家共享。 Github版本：Front-End Resource Collection 前端相關資源匯總學習指導精華文章 Web前端的路該怎么走？：文章超長，但是干貨超級多，值得反復精讀！聽說2017你想寫前端？：適合于已經度過了小白階...

antyiwei 2019-08-29 13:03 評論0 收藏0
前端資源收集整理

摘要：工作原因，最近一年斷斷續續寫了一點前端代碼，收集整理了一些資料，和大家共享。工作原因，最近一年斷斷續續寫了一點前端代碼，收集整理了一些資料，和大家共享。 Github版本：Front-End Resource Collection 前端相關資源匯總學習指導精華文章 Web前端的路該怎么走？：文章超長，但是干貨超級多，值得反復精讀！聽說2017你想寫前端？：適合于已經度過了小白階...

KavenFan 2019-08-01 17:16 評論0 收藏0
從零搭建移動H5開發項目實戰

摘要：并且除了常用的端，還要考慮微信端，或者是端。所以我們要有一套機制，在端上走的代碼，在端或者微信端上走端對應的代碼。對于一個從零開始的移動端項目，我總結了以上這些移動開發難點，希望之后的人能少踩點坑，站在我的肩膀上提高項目開發的效率和質量。從零搭建移動H5開發項目實戰前端H5的前世今身在Pc的時代，前端技術無疑統治了大多數用戶的交互界面！而在移動為王的今天，NA開發在早期占領了大多...

terro 2019-08-29 11:32 評論0 收藏0