rem转换

window.onload = function(){
    /*720代表设计师给的设计稿的宽度,你的设计稿是多少,就写多少;100代表换算比例,这里写100是
      为了以后好算,比如,你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
    getRem(720,100)
};
window.onresize = function(){
    getRem(720,100)
};
function getRem(pwidth,prem){
    var html = document.getElementsByTagName("html")[0];
    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
    html.style.fontSize = oWidth/pwidth*prem + "px";

}



看这两个函数,把这些代码放到js里面,规则就是,调用函数,放两个参数,第一个参数,是设计稿的宽度,第二个参数是px与rem的转换比例,通常会写100(因为好算);当然了,要把这段js代码最好封装在一个单独的js文件里,并且放在所有的css文件引入之前加载。
实际应用起来就是,#box1{ height:100px;}而调用了rem就是#box1{ height:1rem;}以此类推。 100px = 1rem . 1px = 0.01rem。在页面中,凡是跟尺寸有关的padding、margin、width、height等等,都可以用rem来写单位,这样当不同分辨率的手机在看同一个页面时,效果几乎是一样的。

### 前端开发中 REM 单位转换为 PX 的方法及实现 #### 1. 使用 JavaScript 实现 REM 和 PX 的互相转换 可以通过 JavaScript 动态计算 `rem` 和 `px` 的转换关系。以下是一个示例函数,用于将 `rem` 转换为 `px` 或反之: ```javascript function convertRemPx(value, unit) { const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize); if (unit === "px") { return value * rootFontSize; // 将 rem 转换为 px } else if (unit === "rem") { return value / rootFontSize; // 将 px 转换rem } } ``` 通过上述代码,可以轻松实现两者之间的转换[^2]。 #### 2. 使用 SCSS 函数实现 PX 到 REM转换 在 SCSS 中定义一个函数来完成从 `px` 到 `rem` 的转换,方便在样式文件中直接使用: ```scss @function px2rem($px) { $item: 37.5px; // 根据设计稿和需求调整基础值 @return ($px / $item) + rem; } // 使用方式 div { width: px2rem(100px); // 结果为 2.6666666667rem } ``` 此方法适用于需要在样式表中频繁进行单位转换的场景[^1]。 #### 3. 配置 PostCSS 插件自动完成 PX 到 REM转换 通过配置 `postcss-pxtorem` 插件,可以在构建过程中自动将 `px` 转换为 `rem`。以下是具体配置步骤: 1. 安装依赖: ```bash npm install postcss-pxtorem --save-dev ``` 2. 配置 `postcss.config.js` 文件: ```javascript module.exports = { plugins: [ require('postcss-pxtorem')({ rootValue: 16, // 设置 1rem 等于多少像素 propList: ['*'], // 指定需要转换的属性 minPixelValue: 1, // 小于或等于该值的不会被转换 }), ], }; ``` 完成上述配置后,所有符合规则的 `px` 单位都会自动转换为 `rem`[^4]。 #### 4. 使用 amfe-flexible 动态适配不同屏幕 为了实现更灵活的适配方案,可以结合 `amfe-flexible` 插件动态调整根元素字体大小。安装并引入该插件后,配合 `postcss-pxtorem` 使用,能够确保页面在不同设备上正确显示: ```bash npm install amfe-flexible --save ``` 在入口文件中引入: ```javascript import 'amfe-flexible'; ``` 这样可以确保根元素的字体大小根据设备宽度动态调整,从而影响整个页面的 `rem` 计算[^4]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值