1 :安装
postcss-px2rem
2
在webpack.config.js 中添加
 引入

const px2rem = require('postcss-px2rem');
 
找到:

loader: require.resolve('postcss-loader'),
 
 修改
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
----------------使用的是antd-mobile  保证转为rem字体大小不变 使用18 个人感觉还可以的---------------------------
px2rem({
remUnit: 18
})
-------------------------------------------
],
sourceMap: isEnvProduction && shouldUseSourceMap,
},
}
 
 
 
3:public/index.html 
添加
<script>
// 基准大小(750px)
const baseSize = 32
// 设置 rem 函数
function setRem() {
// 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。
const scale = document.documentElement.clientWidth / 750
// 设置页面根节点字体大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
</script>
 
效果:
 

  

react rem的更多相关文章

  1. rem布局在react中的应用

    摘要: 前面给大家分享了一个react项目(http://www.cnblogs.com/xiyangbaixue/p/4751904.html),这次对这个项目做了一些改进,增加了rem布局和对is ...

  2. react canvas圆环动态百分比

    import React from 'react'; import Tools from '../../tools/index' export default class PercentageRing ...

  3. react球形文字旋转标签

    /* * 球形文字旋转标签模块 * */ import React, {Component, PropTypes} from "react"; import ReactDOM fr ...

  4. 前端面试题总结(js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源)

    写在前面 参考答案及资源在看云平台发布,如果大家想领取资源以及查看答案,可直接前去购买.一次购买永久可看,文档长期更新!有什么意见与建议欢迎您及时联系作者或留言回复! 文档描述 本文是关注微信小程序的 ...

  5. ReactiveX 学习笔记(26)使用 RxJS + React.js 调用 REST API

    JSON : Placeholder JSON : Placeholder (https://jsonplaceholder.typicode.com/) 是一个用于测试的 REST API 网站. ...

  6. react中使用vw + antd-mobile进行移动端布局

    首先create-react-app react-vw一顿简单操作生成个demo 1.cnpm run eject 暴露config文件,再cnpm run start报错 (报错...  Canno ...

  7. react +webpack 配置px2rem

    项目背景需要适配ipad 以及手机端,这时候当然要告别刀耕火种时代啦(自己算rem),因为已经有成熟的工具啦,即px2rem(https://www.npmjs.com/package/px2rem) ...

  8. react做股票、期货交易遇到的问题(不完全是react)及解决方法。

    公司项目主要是做股票及期货行情展示及交易,h5相应的做了一些功能---可以看行情图及模拟交易,实盘交易存在一定的风险,老板希望做自己的产品,这样h5就尴尬了,不过没关系,项目里还是有一定技术含量的-- ...

  9. 小白学react之网页获取微信用户信息

    通过上一篇<小白学react之EJS模版实战>我们学习了怎样通过EJS模版生成我们高定制化的index.html文件. 本篇我们将会继续延续我们的alt-tutorial项目的实战计划.去 ...

随机推荐

  1. TCP/IP 通信

    TCP/IP 通信又叫socket 通信,是基于TCP/IP协调面向连接的一个数据传输技术.是属于OSI国际标准的传输层,三次握手 提供数据,有序,安全,端到端的传输和接收.它有三个主要协议:传输控制 ...

  2. 简易Asset工作流

    前言: 当前比较主流的制作流程都可以按顺序细分为三个部分:资产环节(asset section),镜头环节(shot section),合成环节(composite section). 考虑到单一资产 ...

  3. python文件读取操作

    #IO操作 #模拟账号登录 data = [] #0=userName 1=password obj = open("login.txt","r") for l ...

  4. 工控随笔_19_西门子_WinCC的VBS脚本_08_常量和流程控制_01

    在编程的过程中,有时候我们会使用一些固定的值,例如圆周率,或者某个人的生日,或者家庭住址等等, 这些信息对于一个对象来说一旦确定就不会改变,因此我们在编程的时候也不希望这些信息会改变,在VBS里面 也 ...

  5. js判断数组里是否有重复元素的方法

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/longzhoufeng/article/details/78840974 第一种方法:但是下面的这种 ...

  6. 微信小程序+没有找到node_modules目录

    第一步:设置-->项目设置-->使用npm模块 第二步:右键目录下miniprogram-->终端打开-->输入npm init-->在packagename下输入:sm ...

  7. kafka connect rest api

    1. 获取 Connect Worker 信息curl -s http://127.0.0.1:8083/ | jq lenmom@M1701:~/workspace/software/kafka_2 ...

  8. c# datatable 分组

    DataTable dt = new DataTable(); IEnumerable<IGrouping<, ));//按行政区代码前两位分组

  9. Centos7上安装java

    1.默认情况下,系统安装的有jdk1.8,但是使用javac测试时会不识别这个命令,   意味着,java还是未安装好. 2.把java升级即可,此时java已经可用. yum -y install ...

  10. NOIP 2018 Day1

    Fei2Xue@Lian$Tian! 三道原题qwq真的凉 半年前看到有人发说说,梦见省选打开题目,是Please contact lydsy2012@163.com! 没想到一语成谶 大众分300 ...