成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

【技術(shù)】移動(dòng)端適配 px2rem/px2vw 的原理與實(shí)現(xiàn)

AlexTuan / 1033人閱讀

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

簡(jiǎn)介

【目標(biāo)】：前端開發(fā)移動(dòng)端及H5時(shí)候，不需要再關(guān)心移動(dòng)設(shè)備的大小，只需要按照固定設(shè)計(jì)稿的px值布局！
【基礎(chǔ)】

dpr（設(shè)備像素比）
css的像素px不等于設(shè)備像素/分辨率/各種值，css的px可以簡(jiǎn)單理解為虛擬像素，與設(shè)備無關(guān)，css的px需要乘dpr計(jì)算為設(shè)備像素；

css3 的 rem，
即“root em”，是相對(duì)于根元素的font-size來做計(jì)算；
配合js根據(jù)設(shè)備的dpr設(shè)置html的font-size=“XX”來實(shí)現(xiàn)等比縮放

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

實(shí)現(xiàn)

總體來說是將px通過預(yù)定義的配置，根據(jù)不同的dpr計(jì)算為rem/vw，來實(shí)現(xiàn)不同屏幕大小的響應(yīng)式伸縮

1. px 轉(zhuǎn) rem

css3的rem是基于根元素的字體大小計(jì)算的尺寸單位，所以通過改變html的font-size來實(shí)現(xiàn)rem的響應(yīng)式布局，例如使用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}}

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

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

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

deviceWidth=設(shè)備邏輯像素/(dpr * scale)；
dpr為固定值，高清屏一般為dpr=2，所以scale=1/dpr，js動(dòng)態(tài)設(shè)置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. 進(jìn)階：px 轉(zhuǎn) vw

方式簡(jiǎn)而言之就是，基于css3中Viewport相關(guān)vw、vh、vmin和vmax單位，將寬高的px計(jì)算為vw/vh，而vmax/vmin總是指向那個(gè)最大/最小的屏幕長(zhǎng)度

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

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

3. 再進(jìn)階：兼容 vw

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

4. 推薦插件

主要的插件都是基于PostCss的，千萬不要去百度PostCss，要不然從當(dāng)前坑還沒爬出來，又會(huì)發(fā)現(xiàn)另一個(gè)坑，，，

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

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

postcss-aspect-ratio-mini：用來處理元素容器寬高比，針對(duì)img、vedio和iframe實(shí)現(xiàn)更好的長(zhǎng)寬比

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

viewport-units-buggyfill：實(shí)現(xiàn)各個(gè)瀏覽器viewport的兼容

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

加油吧～少年～

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96093.html

相關(guān)文章

  • 前端資源收集整理

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

    awesome23 評(píng)論0 收藏0

  • 前端資源收集整理

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

    antyiwei 評(píng)論0 收藏0

  • 前端資源收集整理

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

    KavenFan 評(píng)論0 收藏0

  • 從零搭建移動(dòng)H5開發(fā)項(xiàng)目實(shí)戰(zhàn)

    摘要：并且除了常用的端，還要考慮微信端，或者是端。所以我們要有一套機(jī)制，在端上走的代碼，在端或者微信端上走端對(duì)應(yīng)的代碼。對(duì)于一個(gè)從零開始的移動(dòng)端項(xiàng)目，我總結(jié)了以上這些移動(dòng)開發(fā)難點(diǎn)，希望之后的人能少踩點(diǎn)坑，站在我的肩膀上提高項(xiàng)目開發(fā)的效率和質(zhì)量。 從零搭建移動(dòng)H5開發(fā)項(xiàng)目實(shí)戰(zhàn) 前端H5的前世今身 在Pc的時(shí)代，前端技術(shù)無疑統(tǒng)治了大多數(shù)用戶的交互界面！而在移動(dòng)為王的今天，NA開發(fā)在早期占領(lǐng)了大多...

    terro 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<