app移动端 rem和px的换算

约定不等于承诺〃 2022-03-12 05:11 251阅读 0赞

rem.js文件

/**
     * Created by zhaolele on 2018/7/25.
     */
    (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 = 32 * (clientWidth / 320) + 'px';
        };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
    
    //10rem

**index.html**

<meta name="viewport" content="width=device-width,initial-scale=1.0" >

*  **换算方法**：rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值，这个参考值设置为多少，完全可以根据您自己的需求来定。  
    如我用320的UI设计图，也可以是640 750 , rem.js换算的根元素在google浏览器是style=“font-size:  
    37.5px;”  
    ![在这里插入图片描述][20190305110547235.png]

**所以公式是：想要的字号px，我想要18px的字号，18/37.5=0.48rem == 18px；注释 18px是自己想要的字号或者元素值，37.5px是google浏览器的根元素参考值；**

[20190305110547235.png]: /images/20220312/a8de9edd2c8c4090978b3adcd93a41c3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，251人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue移动端自动将px转换成rem

开发移动端的过程中，如何频繁的去计算rem和px之间的转换时一件非常麻烦的过程，接下来提供一个vue框架可以自动转换一、安装lib-flexible依赖 ...

Myth丶恋晨/ 2024年04月17日 22:24/ 0 赞/ 40 阅读

相关关于Vue 移动端适配（px2rem 插件将px转为rem)

、安装 npm install px2rem-loader lib-flexible --save 二、入口文件main.js加上 import ...

ゞ浴缸里的玫瑰/ 2024年04月17日 19:42/ 0 赞/ 37 阅读

相关移动端页面适配(px2rem)

1、安装引入lib-flexible . 　　安装lib-flexible：　　npm i lib-flexible --save

快来打我*/ 2022年12月16日 13:12/ 0 赞/ 172 阅读

相关前端px与rem换算

1.为什么要使用rem？之前有些适配做法，是通过js动态计算viewport的缩放值（initial-scale）。例如以屏幕320像素为基准，设置1，那屏幕37

r囧r小猫/ 2022年06月03日 00:55/ 0 赞/ 320 阅读

相关 vue移动端适配 -- px2rem

vue移动端适配 -- px2rem 安装 npm install px2rem-loader lib-flexible --save 在main.js中引入 i

朱雀/ 2022年04月15日 00:48/ 0 赞/ 286 阅读

相关 app移动端 rem和px的换算

rem.js文件 / Created by zhaolele on 2018/7/25. / (function(doc, win) {

约定不等于承诺〃/ 2022年03月12日 05:11/ 0 赞/ 252 阅读

相关 px2rem-loader（Vue:将px转化为rem，适配移动端）

前提: 搭建vue项目框架: 全局安装 vue-cli $ npm install --global vue-cli 创建一个基于 webpack

偏执的太偏执、/ 2021年11月17日 12:34/ 0 赞/ 597 阅读

相关 px2rem-loader（Vue:将px转化为rem，适配移动端）

1：使用的是vue-cli+webpack，通过npm来安装的 npm i lib-flexible --save 2：在main.

我就是我/ 2021年10月19日 04:38/ 0 赞/ 388 阅读

相关关于Vue 移动端适配（px2rem 插件将px转为rem）

一、安装 npm install px2rem-loader lib-flexible --save 二、入口文件main.js加上 import 'l

小灰灰/ 2021年09月29日 14:16/ 0 赞/ 343 阅读

相关 H5 px rem 单位换算

;(function(w) { var _config = w.comConfig, comFuc = {

悠悠/ 2021年09月14日 03:04/ 0 赞/ 400 阅读