吃透移动端 H5 响应式布局｜深入原理到目前最佳实践方案( 二 ) _小知识

实现

const MAX_FONT_SIZE = 420// 定义最大的屏幕宽度document.addEventListener('DOMContentLoaded', () => {const html = document.querySelector('html')let fontSize = window.innerWidth / 10fontSize = fontSize > MAX_FONT_SIZE ? MAX_FONT_SIZE : fontSizehtml.style.fontSize = fontSize + 'px'})复制代码

px 转 rem

pxToRem 方案一

$rootFontSize: 375 / 10;// 定义 px 转化为 rem 的函数@function px2rem ($px) {@return $px / $rootFontSize + rem;}.demo {width: px2rem(100);height: px2rem(100);}复制代码

pxToRem方案二在vue-cli3 中装 postcss-pxtorem 插件就可以了，其他平台也是大致差不多的思路。

const autoprefixer = require('autoprefixer')const pxtorem = require('postcss-pxtorem')module.exports = {// ...css: {sourceMap: true,loaderOptions: {postcss: {plugins: [autoprefixer(),pxtorem({rootValue: 37.5,propList: ['*']})]}}}}复制代码

点击快速配置 H5 项目工程
继续探索postcss-pxtorem插件源码，查看它实现的原理。

function createPxReplace (rootValue, unitPrecision, minPixelValue) {return function (m, $1) {if (!$1) return m;var pixels = parseFloat($1);if (pixels < minPixelValue) return m;var fixedVal = toFixed((pixels / rootValue), unitPrecision);return (fixedVal === 0) ? '0' : fixedVal + 'rem';};}复制代码

px变换成 rem 主要是这个函数，当然里面有很多可配置的参数, 核心原理和我们方案一差不多。方便在于，不需要每次写px都要加上一个函数，代码也清晰很多。

是不是所有元素 px 都要转换成 rem呢？那可不一定哦，border 中的 px 不应该转 rem，涉及到另外一个 1px 的问题，上一篇文章详细论述过，避免 px 转 rem，将 border 中的 px 大写成 PX/Px/pX

1px 适配问题请移至吃透移动端 1px
解决方案二：vh + vw原理vw 相对于视窗宽度的单位，随宽度变化而变化。由此看来，方案一其实是方案二的一种 "Hack", 通过使用监听实现了方案二的效果。
实现与 rem 类似做法，直接使用 postcss-px-to-viewport 插件进行配置, 配置方式也是和 postcss-pxtorem 大同小异。
我们看看插件的原理是不是也是一样的呢？

function createPxReplace(opts, viewportUnit, viewportSize) {return function (m, $1) {if (!$1) return m;var pixels = parseFloat($1);if (pixels <= opts.minPixelValue) return m;var parsedVal = toFixed((pixels / viewportSize * 100), opts.unitPrecision);return parsedVal === 0 ? '0' : parsedVal + viewportUnit;};}复制代码

果然呢，连方法名、变量名、代码逻辑，都一摸一样哈哈哈！谁抄谁，我就不指出来啦！
其他解决方案

文章插图

上面方案均存在致命缺陷，不推荐使用它完成移动端布局计算。

flex 与 rem 结合使用更佳

兼容性上述两种方案，兼容性主要在于 rem，vh，vw 关键词上

文章插图

rem在移动端表现高达 100%，令人惊叹！

文章插图

文章插图

vh vw 表现还是比较令人满意，低版本的 safari 情况下会有兼容性问题，但不影响它会成为一种比较好的移动端布局解决方案。
开源库解决方案vant 组件库

文章插图

vant 组件库中，默认采用 px 做计量单位，如果需要使用 rem，直接使用插件完美适配。
对于 vw 方案，vant 也是可以通过插件将 px 转成 vw，对于 vw 可能会存在一些坑点。
ant-design-mobile 组件库ant-design-mobile 组件库仍然使用 px 单位

@hd: 1px; // 基本单位// 字体尺寸// ---@font-size-icontext: 10 * @hd;@font-size-caption-sm: 12 * @hd;@font-size-base: 14 * @hd;@font-size-subhead: 15 * @hd;@font-size-caption: 16 * @hd;@font-size-heading: 17 * @hd;// 圆角// ---@radius-xs: 2 * @hd;@radius-sm: 3 * @hd;@radius-md: 5 * @hd;@radius-lg: 7 * @hd;@radius-circle: 50%;// 边框尺寸// ---@border-width-sm: 1PX;@border-width-md: 1PX;@border-width-lg: 2 * @hd;复制代码

与 vant 组件一样，还是由开发者来决定到底用哪一种方案这种把选择权交给开发者，算是一种开源库的最灵活的做法了。
总结通过该文，你大概了解 H5 问题的来龙去脉了吧，也明白了如何解决移动端响应式布局问题，如果这篇文章能解决你的疑问或者工作中问题，不妨点个赞收藏下。