react中使用postcss-px2rem(你说简单不?)

目录

• • • 1 前言
    • 2 为什么要使用rem适配?
    • 3 简单使用postcss-px2rem
    • 4 我理解的postcss-px2rem(为啥失败?!)

1 前言

看了一大堆教程 , 感觉对postcss怎么利用都说得让人(让我)摸不着头脑 , 弄得我想骂娘(#KaTeX parse error: Expected 'EOF', got '#' at position 1: #̲%^#%KaTeX parse error: Expected group after '^' at position 1: ^̲%^((*#&)%&^ …) , 但最后 , 我终于成功了 , 呜呜呜 ,好了 , 废话不说 , 看看我是怎么理解postcsc-px2rem的 ( 你丫的官方文档写的个什么**玩意 )

2 为什么要使用rem适配?

因为我们写代码的时候只写一份 , 还要适配不同手机的屏幕大小 . 有些屏幕大点 , 有些屏幕小点 ; 所以要适配 , 而rem是目前最好选择 ;

3 简单使用postcss-px2rem

文件目录
/public/index.html

  <script>
    function adapter() {
      //获取手机横向的设备独立像素
      const dip = document.documentElement.clientWidth
      //设置根字体大小(为什么要除以10?因为规定,后面的remUnit只能写37.5,我只能照做,否则就失败!)
      const rootFontSize = dip/10
      //设置根字体
      document.documentElement.style.fontSize = rootFontSize + 'px'
    }
    adapter()

    window.onresize = adapter
  </script>

文件目录
/config-overrides.js

1 .要引入 addPostcssPlugins
2 .加一行代码(用两行注释*号围着的)
addPostcssPlugins([require('postcss-px2rem')({ remUnit: 37.5 })])

const { override, addLessLoader, fixBabelImports,addPostcssPlugins  } = require('customize-cra');
module.exports = override(
	addLessLoader({
		lessOptions: {
			modifyVars: { '@brand-primary': '#3BBE64', '@brand-primary-tap': '#B22222', '@hd': '1px' },
			// 设置自定义主题样式
			// 配置参数：https://github.com/ant-design/ant-design-mobile/blob/master/components/style/themes/default.less
			javascriptEnabled: true, // 允许js更改antd-mobile中的less变量
		},
	}),
	fixBabelImports('import', {
		libraryName: 'antd-mobile', // 对哪个库进行按需引入
		libraryDirectory: 'es', // 样式模块作为es6模块引入
		style: true, // 处理原样式文件
	}),
	//****************************************************
	addPostcssPlugins([require('postcss-px2rem')({ remUnit: 37.5 })])
	//****************************************************
);

4 我理解的postcss-px2rem(为啥失败?!)

remUnit : 37.5px
意思是
1rem = 37.5 px

然后我
在public/index.html里设置根字体大小为

      const dip = document.documentElement.clientWidth

      const rootFontSize = dip

      document.documentElement.style.fontSize = rootFontSize + 'px'

又设置remUnit = 375
即
1rem = 375 px
1/375rem = 1px


但最后表现出来的样式非常大 , 几万几万的数值 , 哎 , 搞不懂 , 不搞了 

标签：const,px2rem,px,react,remUnit,postcss,37.5
来源： https://blog.csdn.net/m0_50823463/article/details/117830399