react配置px转换rem的方法

安装相关的依赖

npm i lib-flexible --save
npm i postcss-px2rem --save

主要用来暴露项目配置

npm run eject
！如果运行npm run eject报错，出错的原因应该是仓库里面代码没有提交，如下提交一下
git add .
git commit -m '自定义名'
npm run eject

然后打开项目中 config->webpack.config.js 进行配置

// 在配置文件中添加如下两行代码
// px2rem({ remUnit: 75 }) 的意思就是1rem = 75px 这个是根据750px设计稿来的，如果是620 的就写 62

const px2rem = require('postcss-px2rem');
px2rem({ remUnit: 75 })

按照设计图大小设置 如：108=1080px/10

引入 lib-flexible：在入口文件index.js中引入lib-flexible文件

import 'lib-flexible'

在 public->index.html 文件里把下面的这段代码注释掉

配置完成之后 重启项目

到此这篇关于react配置px转换rem的方法的文章就介绍到这了,更多相关react配置px转换rem内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解react内联样式使用webpack将px转rem

    背景 在开发react项目时,很多时候我们把style写在css.less.scss里,经过像postcss这样的配置处理,但有没有这样一种需求呢,像有些样式我们直接写在xml标签上style里,然后也能进行处理,如px2rem能将px转rem,是否在style上写也能实现. 思路 我们在webpack,/.(js|jsx)?$/这样babel-loader之前(webpack从右往左)加一个loader把需要转变的px进行替换,不就好了,先找找有没有这样的loader,我找了下没找到,只能自己

  • react koa rematch 如何打造一套服务端渲染架子

    前言 本次讲述的内容主要是 react 与 koa 搭建的一套 ssr 框架,是在别人造的轮子上再添加了一些自己的想法和完善一下自己的功能. 本次用到的技术为: react | rematch | react-router | koa react服务端渲染优势 SPA(single page application)单页应用虽然在交互体验上比传统多页更友好,但它也有一个天生的缺陷,就是对搜索引擎不友好,不利于爬虫爬取数据(虽然听说chrome能够异步抓取spa页面数据了): SSR与传统 SPA

  • JavaScript中rem布局在react中的应用

    前面给大家分享了一个react项目(http://www.jb51.net/article/76085.htm),这次对这个项目做了一些改进,增加了rem布局和对iscroll在Android上的优化. 项目代码,欢迎fork和star,在线预览 REM布局实例代码 var fontSizeInit = function() { var doc = document.documentElement, cli = doc.clientWidth; cli&&(cli/=320,2<cl

  • react配置px转换rem的方法

    react配置px转换rem的方法

    安装相关的依赖 npm i lib-flexible --save npm i postcss-px2rem --save 主要用来暴露项目配置 npm run eject !如果运行npm run eject报错,出错的原因应该是仓库里面代码没有提交,如下提交一下 git add . git commit -m '自定义名' npm run eject 然后打开项目中 config->webpack.config.js 进行配置 // 在配置文件中添加如下两行代码 // px2rem({ re

  • Vue项目自动转换 px 为 rem的实现方法

    前端开发中还原设计图的重要性毋庸置疑,目前来说应用最多的应该也还是使用rem.然而很多人依然还是处于刀耕火种的时代,要么自己去计算rem值,要么依靠编辑器安装插件转换. 而本文的目标就是通过一系列的配置后,在开发中可以直接使用设计图的尺寸开发,项目为我们自动编译,转换成rem. 技术栈 vue-cli:使用脚手架工具创建项目. postcss-pxtorem:转换px为rem的插件. 自动设置根节点html的font-size 因为rem单位是相对于根节点的字体大小的,所以通过设置根节点的字体大

  • vue px转rem配置详解

    vue px转rem配置详解

    目录 方法一 一.配置与安装步骤: 方法二 方法三 总结 方法一 一.配置与安装步骤: 1.在 Vue 项目的 src 文件夹下创建一个 config 文件夹: 2.在 config 文件夹中创建 rem.js: 3.将以下代码复制到 rem.js 中: // 基准大小 const baseSize = 32 // 设置 rem 函数 function setRem () { // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改. const scale = document.do

  • 详解vue2.0 不同屏幕适配及px与rem转换问题

    详解vue2.0 不同屏幕适配及px与rem转换问题

    因为项目需要,vue开发项目,必须将已写的以px为单位的部分,转换为rem.要是全部转换,这大量的计算量,哪怕是sublime Text 的cssrem插件,也是一个庞大的工作量.所以,直接使用插件没商量. 第一步:因为rem是根据更元素来计算大小,所以,捕捉到当前屏幕的大小并赋值给html,这是其一 第二步:使用px2rem插件,来捕捉当前项目的所有px,直接计算相对应数值. 这样,以后写界面,就可以直接用px来构建界面,不用自己去计算啦! 1.安装插件(我是安装了淘宝镜像,所以是cnpm,若

  • React项目配置prettier和eslint的方法

    React项目配置prettier和eslint的方法

    目录 配置prettier和eslint 配置stylelint 保存自动修复 参考视频: https://www.bilibili.com/video/BV1rh411e7E5?vd_source=eee62ea3954ac01bff9e87e2a7b40084 prettier代码格式化 eslint js语法检查 stylellint css样式检查 配置prettier和eslint 1.初始化React项目 npx create-react-app study_react 2.安装vs

  • React Native时间转换格式工具类分享

    本文实例为大家分享了React Native时间转换格式工具类,供大家参考,具体内容如下 class DateUtil{ /** * 例如:2017-06-28 10:48:46转成date类, * 可把- replace成/ * @param dateString * @return Date */ static parserDateString(dateString){ if(dateString){ let regEx = new RegExp("\\-","gi&qu

  • Json在Struts中的转换与传递方法

    Json在Struts中的转换与传递方法

    本文主要探讨普通数据如何快速转换为Json数据,一共讨论2种方法: 首相准备页面和实体类: 页面: <body> <div id="topLoginDiv"> 用户名: <input name="user.name" id="loginName" />  密码: <input name="user.password" id="loginPassword" />

  • 解决React Native端口号修改的方法

    解决React Native端口号修改的方法

    本文介绍了解决React Native端口号修改的方法,分享给大家,具体如下: 看图说话 一般情况下,如果本地安装过一些服务的话,ReactNeact 就会毫不犹豫的给你报出错误信息, 如果你是这个错误,那么你的端口号被占用了,ReactNative默认端口为8081 解决方案1: 很简单,找到使用node生成的ReactNative项目 使用node命令: 在cmd命令中,切换到项目目录下,输入: react-native start --port 9999 接下来,继续走 然后,摇晃设备或者

  • 3分钟读懂移动端rem使用方法(推荐)

    1.为什么要用rem 博客很久没写了,原因很简单. 最近接手了一个项目,要同时做PC和移动端的页面,之前没接触过,但毕竟给钱的是大爷,所以还是硬着头皮上了. 移动端最麻烦的是什么? 不同分辨率适配! 具体来说,有的屏幕320px宽,有的屏幕640px宽,有的更宽,如果你写固定px,那么要么小的放不下,要么大的有大片空白. 怎么办? 如果元素固定占用屏幕空间(一般是指宽度而非高度,下同)的百分之xx就ok了. 比如320px的10%是32px,640px的10%是64px, 如果10个10%宽度的

随机推荐