rem适配

最新推荐文章于 2023-02-21 10:51:27 发布

森媛

最新推荐文章于 2023-02-21 10:51:27 发布

阅读量332

点赞数

文章标签： postcss javascript html5

本文链接：https://blog.csdn.net/m0_62351590/article/details/122292270

版权

本文介绍了三种实现rem适配的方法：手写rem、通过下载lib-flexible和postcss-pxtorem插件进行转换，以及使用VM。详细步骤包括安装依赖、配置postcss和处理版本兼容问题。

摘要由CSDN通过智能技术生成

第一种:手写rem

<script>
	// 封装一个根据屏幕尺寸自动改变html的font-size大小的函数
function rem() {
   
    //  获取html的宽度
    let htmlW = document.documentElement.clientWidth;
    // 获取body的宽度
    let bodyW = document.body.clientWidth;
    // 兼容处理
    let W = htmlW || bodyW;
    // 设置html的font-size大小
    // 因为设计图尺寸是750，所以平分，这样*100之后，1rem就等于100px;
    document.documentElement.style.fontSize = (W / 750 * 100)

最低0.47元/天解锁文章

森媛

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
rem适配

第一种:手写rem<script> // 封装一个根据屏幕尺寸自动改变html的font-size大小的函数function rem() { // 获取html的宽度 let htmlW = document.documentElement.clientWidth; // 获取body的宽度 let bodyW = document.body.clientWidth; // 兼容处理 let W = htmlW || bodyW;
复制链接

扫一扫