.比如设计稿是750px，假设根元素字体大小设置为100px，则1rem = 100px;所以为了适应各种屏幕尺寸：一般设置根元素font-size 为屏幕宽度/UI设计图宽度 *100+‘px’，这也相当于1rem对应的px尺寸。可配合媒体查询@media来设置。用的时候除以100，10px = 0.1rem

1.直接在scss文件中使用函数

定义函数

 @function px2rem($px) {@return $px / 75 * 1rem;}

使用时调用函数

要看设计稿尺寸哦，看设置的根元素为多少，例设置设备宽度为750，根元素字体为75，但我们设计稿为375的话，就要把px*2传进去~

如果是 width: 45px
改成rem为
width:px2rem(90)

2.安装插件
直接安装postcss-pxtorem插件,在postcss-loader中postcss-scss选项中配置

注：px2rem中的exclude选项两边不能带引号，项目路径要用正则表达式表达,多个选项之前用"|"隔开。

例： pc/index/guide要使用pc(\|/)index(\|/)guide

 {loader: 'postcss-loader',options: {parser: 'postcss-scss',plugins: () => [autoprefixer({broswers: ['last 5 versions', '> 0.05%'],remove: false,}),require('postcss-pxtorem')({rootValue : 37.5,selectorBlackList  : [], //过滤propList   : ['*'],// 规则是class中包含的字符串，如vux中所有的class前缀都是weui-。也可以是正则。// exclude: /node_modules/i ,// exclude: /packages(\\|\/)detail/i ,// exclude: /node_modules|pc(\\|\/)index(\\|\/)guide/i ,],},},

3.vscode插件 px to rem & rpx(cssrem)
这款插件会自动把px转换成rem，在vscode 插件扩展里我们设置好根字体设计稿尺寸等

然后我们写px的时候屏幕上会自动出现 rem的选项，这时候我们点击一下就可以啦，这样也可以实现等比缩放了！

最后为了我们改变窗口大小或者在多个不同分辨率的屏幕上移动，我们还要写个window.resize()方法

export const setRem = () => {const baseSize = 75;function resizeRem() {const scale = document.documentElement.clientWidth / 750;document.documentElement.style.fontSize = `${baseSize * scale}px`;}resizeRem();window.onresize = function () {console.log('onresize');resizeRem();};
};

react中px转rem（px2rem和px to rem rpx的使用）相关推荐

如何把设计稿中px值转化为想要的rem值
如何把设计稿中px值转化为想要的rem值首先我们需要的是把尺寸转化为rem值假如设计稿中的是 200px*200px的图片移动端的设计图尺寸一般是640*750; 第一步. 把图片分为若干份 ...
面试总结（CSS 的盒模型？、CSS 中选择器的优先级以及 CSS 权重如何计算？、CSS 中哪些属性可继承，哪些不可以？、CSS 单位中 px、em 和 rem 的区别？、rem 适配....)
CSS 的盒模型? 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分第一种是 W3C 标准的盒子 ...
css自动转rem,css之px自动转rem—“懒人”必备
作为一名前端开发,尤其是在做移动端适配时,rem是我们经常用到的单位,它的好处大家可以自行搜索,网上已经有很多了. 但是我们再将设计稿上的px转换成rem时,得手动的去计算,这是一个很耗时.费力的过程 ...
CSS中大小单位px，em，rem 以及微信小程序的rpx
CSS中可以定义大小的单位有四种px,em,rem 以及微信小程序的rpx . 2017-05-25 px - 像素(Pixel).相对长度单位.像素px是相对于屏幕分辨率而言的. em - 相对长度 ...
css font size 单位,css中font-size的单位总结：px、em、pt
px:基于像素的单位.像素是一种有用的单位,因为在任何媒体上都可以保证一个像素的差别确实是可见的. em :一般用来测量长度的通用单位(例如元素周转的页边空白和填充),当用于指定字体大小时,em单位是 ...
移动端适配-flexible.js使用(解决对外部引入css，px2rem能不能转换rem问题)
移动端flexible.js 适用于最新版vue-cli,配置手淘的lib-flexible.js和rem实现移动端页面自适应 1.安装lib-flexible.js npm install lib- ...
this指向、数据双向流、传递参数、JSX中循环、React中样式、路由、引入资源的其它方式、create-react-app脚手架、事件处理、获取数据、UI框架推荐、pc桌面应用electronjs
改变this指向的几种方式: //1.使用箭头函数代替原始函数写法:getState=()=>{}//2.在函数调用时给函数名加bind(this)方法:(bind中第一个参数表示修改this指 ...
react 使用rem布局_react如何使用rem适配
使用lib-flexible插件 postcss-px2rem插件在config-overrides.js里面配置 const { override, fixBabelImports,addPost ...
html中的rem做响应式,使用rem制作响应式网站
1.rem可以适配不同分辨率具体来说,有的屏幕640px宽.有的750px宽,有的甚至更大或者更小,如果是用固定的px单位,要么导致大的放不下,或者是小的很难看. 如果元素大小固定占屏幕的百分之X就 ...

react中px转rem（px2rem和px to rem rpx的使用）

1.直接在scss文件中使用函数

定义函数

使用时调用函数

react中px转rem（px2rem和px to rem rpx的使用）相关推荐

最新文章

热门文章