postcss-plugin-px2rem 移动端适配原理

postcss-plugin-px2rem 配置

const px2remOpts = {rootValue: 100,// unitPrecision: 5, //允许REM单位增长到的十进制数字。//propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。// propBlackList: [], //黑名单exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值// selectorBlackList: [], //要忽略并保留为px的选择器// ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。// replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。mediaQuery: false, //（布尔值）允许在媒体查询中转换px。minPixelValue: 3, //设置要替换的最小像素值(3px会被转rem)。 默认 0
};

rootValue是代码中px转rem的一个计算基准。100的意思就是100px=1rem，如果代码中设置为200px，那么最后在浏览器显示的就是2rem。

浏览器显示的是2rem，底层在渲染的时候是按照2rem*font-size=xxxpx渲染的。

这个时候就有问题了，在不同大小屏幕下，200px都会被转换成2rem，不同屏幕的font-size不一样，那么底层渲染出来的2rem也不一样。就会有兼容问题。并且我的设计搞的375px，那么我就想让375px等于屏幕的宽。

样式代码：

.demo {margin-top: 50px;width: 375px;height: 30px;background-color: red;
}

解决办法：

如果我们的UI给出的设计稿是375px，然后我们切换到iphone6下面直接给视图设置357px，先不进行rem转换，那么宽度肯定是刚好占满屏幕。

我们再就行rem转换，375px被转换成3.75rem，那么这个3.75rem要刚好等于屏幕的宽，发现没有等于屏幕的宽。那要怎么才能等于屏幕的宽呢？

1 先解决如何让375px也就是3.75rem占满屏幕

我们需要3.75rem在渲染的时候被底层换算成375px，那么就可以刚好占满屏幕宽度。

3.75rem * font-size=375px，那么font-size=100px。

<script>(function (doc, win) {var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',recalc = function () {var clientWidth = docEl.clientWidth;if (!clientWidth) return;docEl.style.fontSize = 100 +'px';};if (!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);
</script>

2 如何让不同机型都可以把3.75rem换算成屏幕的宽

问题又来了，我把机型换成iphone XR，设备宽度为414px，也就是需要3.75rem在渲染时候被换算成414px

所以我们就不能把fontSize设置成固定的100px。

3.75rem*font-size=414px，上面的是

3.75rem * font-size=375px，

等价于

3.75rem*font-size=clientWidth，

3.75rem * font-size=clientWidth，

clientWidth（设备屏幕宽度）

font-size=clientWidth/3.57=clientWidth/357 *100 px

所以我们需要把上面的代码再完善一下

<script>(function (doc, win) {var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',recalc = function () {var clientWidth = docEl.clientWidth;if (!clientWidth) return;docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';};if (!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);
</script>

这样在所以屏幕中3.75rem就代表了设备屏幕的宽。

完美解决。

这样我们就可以按照设计搞给的px直接设置在代码中，不用再考虑页面兼容和rem的换算问题。

postcss-plugin-px2rem 移动端适配原理相关推荐

移动端屏幕适配原理以及方法讲解
序言: 今天周日,我正坐在黄埔区图书馆,思索着关于移动端屏幕适配的问题.作为一名年纪轻轻的前端马蓉,不,是码农,移动端屏幕适配的方案的帖子没读过100篇吧,也读过几十篇了.可是今天我又在思考这个问题了 ...
html px2rem转化器,【技术】移动端适配 px2rem/px2vw 的原理与实现
简介 [目标]:前端开发移动端及H5时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局! [基础] dpr(设备像素比) css的像素px不等于设备像素/分辨率/各种值,css的px可 ...
cli3 px转rem适配移动端_Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
今天,我们使用vue cli3 做一个移动端适配 . 前言首先确定你的项目是vue cli3版本以上的. 一.移动端适配包 1.安装移动端适配包 npm i lib-flexible -s 2.在 ...
Vue CLI3 移动端适配【px2rem 或 postcss-plugin-px2rem】
今天,我们使用Vue CLI3 做一个移动端适配 . 前言首先确定你的项目是Vue CLI3版本以上的. 一.移动端适配包 1.安装移动端适配包 npm i lib-flexible -S 2.在m ...
vue-cli3.0结合lib-flexible、px2rem实现移动端适配，完美解决第三方ui库样式变小问题
vue-cli3.0结合lib-flexible.px2rem实现移动端适配,完美解决第三方ui库样式变小问题参考文章: (1)vue-cli3.0结合lib-flexible.px2rem实现移动 ...
vue 使用lib-flexable，px2rem 进行移动端适配但是引入的第三方UI组件 vux 的样式缩小，解决方案...
最近在写移动端项目,就想用lib-flexable,px2rem来进行适配,把px转换成rem但是也用到了第三方UI组件库vux,把这个引入发现一个问题就是vux的组件都缩小了,在网上找不到答案,最后 ...
mui初级入门教程（六）— 模板页面实现原理及多端适配指南
文章来源:小青年原创发布时间:2016-07-26 关键词:mui,webview,template,os,多端适配转载需标注本文原始地址: http://zhaomenghuan.github. ...
移动端适配--概述、简单适配原理、通用适配方案实现
使页面在移动端各种大小的屏幕上都能够正常显示的一种移动端开放方案一.概述 1.1 什么是移动端主要是一些手持设备,最具有代表性就是手机和平板,比如智能手表,掌上游戏机等移动设备: 在前端开发中,移 ...
移动端适配方案px2rem
移动端的适配方案 React 暴露webpack配置,即 react-scripts 包 npm run eject ⚠️ 在运行该命令的时候,要先将已经修改的文件提交到本地仓库中,否则会报错! 安装 ...

postcss-plugin-px2rem 移动端适配原理

postcss-plugin-px2rem 移动端适配原理相关推荐

最新文章

热门文章