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. fatal: could not read Username for 'https://git.dev.tencent.com' 解决方法

    在使用webhook自动部署时测试出现此问题,通过以下方法粗暴解决: vim .git/config 文件,在remote "origin"  url中加入帐号密码,如图所示,格式 ...

  2. DApp demo之pet-shop

    注意: 这里使用的truffle版本为4.1.4,貌似使用高版本在truffle test时候会出问题,提示 truffle/Assert.sol is not found等错误 使用Truffle ...

  3. nginx 用来做什么?

    代理服务端,反向代理,负载均衡. 其特点是占有内存少,并发能力强.

  4. VS2017报错 未能加载文件或程序集”Oracle.DataAccess, Version=2.122.1.0, Culture=neutral, PublicKeyToken=89b483f429c47342"或它的某一个依赖项。试图加载格式不正确的程序

    1.VS2017调用Oracle数据库报错:(采取Oracle.DataAccess.Client.dll方法调用) 2.解决方案:(将架构由anycpu转成x86或者x64) 3.具体步骤:anyc ...

  5. cucumber soapui test web services

    没有UI,所以不需要Selenium. 首先Cucumber: 每个web service形成一个feature文件,描述完成的业务场景. 是否引入参数? 如果引入参数,可能需要根据某种方式保存参数, ...

  6. 个人简介HTML

    码云链接:https://gitee.com/lengxiaoyixuan222/codes/z4dxnvr0ce2blpkihsg7985 源代码: <!doctype html> &l ...

  7. Android 开发 Fresco框架点击小图显示全屏大图实现 ZoomableDraweeView

    目标需求 实现一张小图片,被点击后变成一个在整个屏幕上显示的大图片.类似于微信朋友圈的图片. 实现流程 1.Fresco基本初始化 2.下载并且导入ZoomableDraweeView 它是实现大图的 ...

  8. leetcode每日刷题计划-简单篇day5

    刷题成习惯以后感觉挺好的 Num 27 移除元素 Remove Element 跟那个排序去掉相同的一样,len标记然后新的不重复的直接放到len class Solution { public: i ...

  9. 04 Javascript的数据类型 数组 函数

    javascript:包含ECMAscript DOM BOM 描述了以下内容: 语法 类型 语句 关键字 保留字 运算符 对象 引入方式: <script> alert(123) < ...

  10. python学习(list增删改查、及常用方法)

    1.Python多条件判断: 多条件判断if: passelse: pass循环 while for i = 0 while i > 1: print('hello') else: print( ...