H5使用Vant自适应布局(postcss-pxtorem)

发布时间：2023-09-20 16:29:38 作者：Paul_Chan_

本文将介绍如何使用Vant组件库中的自适应布局来实现H5页面的优化和适配，可以使H5页面达到更佳的用户体验,具有一定的参考价值，感兴趣的可以了解一下

1、安装 postcss-pxtorem

npm install postcss postcss-pxtorem --save-dev

2、在根目录新建postcss.config.js，配置 postcss-pxtorem

module.exports = {
    plugins: {
        // autoprefixer: {},
        'postcss-pxtorem': {
            // rootValue: 75, // 设计稿宽度的1/10
            rootValue({ file }) {
                // 判断是否是vant的文件 如果是就使用 37.5为根节点字体大小
                // 否则使用75 因为vant使用的设计标准为375 但是市场现在的主流设置尺寸是750
                return file.indexOf('vant') !== -1 ? 37.5 : 75;
            },
            unitPrecision: 5, // 保留rem小数点多少位
            propList: ['*'], // 需要做转化处理的属性，如`hight`、`width`、`letter-spacing`等，`*`表示全部
            // propBlackList: ['font-size'], //过滤掉不需要转换的属性
            minPixelValue: 0, //px小于12的不会被转换,默认 0
            selectorBlackList: [] // 忽略转换rem转换,正则匹配项（选择器）,如：过滤点含有"el-"或以".ant"开头的选择器
            // exclude: /(node_module)/ //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
        }
    }
};

注意：rootValue ，判断是否是vant的文件，如果是就使用 37.5为根节点字体大小；否则使用75，因为vant使用的设计标准为375，但是市场现在的主流设置尺寸是750

3、utils文件夹下，新建一个rem.js

function setRem() {
    // 配置宽度为750px时，1rem的值为：75px;
    const screenWidth = 750;
    const scale = screenWidth / 75;
    const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    // 得到html的Dom元素
    const htmlDom = document.getElementsByTagName('html')[0];
    // 设置根元素字体大小
    htmlDom.style.fontSize = htmlWidth / scale + 'px';
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem();
};

4、main.js引入rem.js文件

import '@/utils/rem.js'

5、但是postcss-px2rem插件并没有处理内联样式的功能，于是我们便需要对之自行处理。

1）在src/utils/index.js下

export const px2rem = (px) => {
    if (/%/gi.test(px)) {
        // 有百分号%，特殊处理，表述pc是一个有百分号的数，比如：90%
        return px;
    } else {
        return parseFloat(px) / 75 + 'rem'; // 这里的75，和postcss.config.js里的rootValue值对应
    }
};

2）然后在main.js

import { px2rem } from '@/utils';
Vue.prototype.$px2rem = px2rem;

3）使用

<div :style="{ 'font-size': $px2rem('16px') }">测试</div>

到此这篇关于H5使用Vant自适应布局(postcss-pxtorem)的文章就介绍到这了,更多相关H5 Vant自适应布局内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！

Tag：Vant自适应布局 H5

H5使用Vant自适应布局(postcss-pxtorem)
本文将介绍如何使用Vant组件库中的自适应布局来实现H5页面的优化和适配，可以使H5页面达到更佳的用户体验,具有一定的参考价值，感兴趣的可以了解一下
2023-09-20
使用H5实现短信验证码一键登录功能
使用uniapp开发打包H5及PC和小程序，H5端实现登录需求一开始是接入阿里云的手机号一键登录服务，但是H5的一键登录功能需要关闭WiFi开启数据才有效，所以换为了四位短信验证
2023-09-19
使用 html5-qrcode实现扫码功能
html5-qrcode是轻量级和跨平台的QR码和条形码扫码的JS库，集成二维码、条形码和其他一些类型的代码扫描功能，这篇文章主要介绍了使用 html5-qrcode 扫码功能,需要的朋友可
2023-09-13
html5手写签名的实现示例
公司新做了个功能，一些审核的地方需要加入一些手写签名的功能，本文就介绍了html5手写签名的实现示例，具有一定的参考价值，感兴趣的可以了解一下
2023-07-17
关于input type="file"的及其files对象的深度解析
我们都知道，html5中有个input type=file元素，用该元素可以实现页面上传文件的功能，这篇文章主要介绍了关于input type="file"的及其files对象的深层解析,需要
2023-07-13
uniapp scroll-view基础用法和示例
在uniapp日常开发的过程中经常会有局部滚动的需求，而scroll-view组件正好可以满足这一需求，这篇文章主要介绍了uniapp scroll-view基础用法和示例,需要的朋友可以参考下
2023-06-19
html5跟随鼠标炫酷动画欢迎页hovertreewelcome
原生js与html5实现的跟随鼠标炫酷动画欢迎页,刚好今天看到了就分享给大家
2023-05-25
Canvas和SVG的区别小结
Canvas和SVG都是HTML5中的图形渲染技术，那么你知道这两种有哪些区别吗，本文就详细的介绍一下，感兴趣的可以了解一下
2023-05-11
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
在 HTML5 中，文档对象（即 document 对象）具有一个 visibilityState 属性，该属性表示当前文档对象的可见性状态，这篇文章主要介绍了HTML5中的DOCUMENT.VISIBILITYSTATE
2023-05-05
html原生table实现合并单元格以及合并表头的示例代码
表格是常见的数据统计的一种形式，合并单元格及合并表头经常在复杂表格中遇到，本文主要介绍了html原生table实现合并单元格以及合并表头的示例代码，感兴趣的可以了解一下
2023-04-28