标签：const px2rem px react remUnit postcss 37.5

目录

• • • 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。