px转换为rem插件,hbuilder 可以把全部px转换rem

一个PostCSS 插件，px 转换，变成vw和rem。要在vueloader中使用px2-2插件首先安装px2remloader:根据设计稿中采用的手机型号(如iPhone6或iPhone 6)那么宽度为640 px或750/1250因此，首先在chrome调试工具中获取移动终端根元素的fontsize值，然后在配置vueloader时将其设置为参数remUnit的值:这样，在开发时就可以根据设计稿的大小写入CSS像素，即px unit、px2 rem会自动将大小转换更改为对应的rem unit，并组合不同终端生成的不同html根元素的字体大小。

秒rem响应式布局方案(比例缩放):使用时，按1920年的设计稿做。100 px1 rem，fontsize设置为100px；750px1/1rem100px的设计稿如果屏幕尺寸超过2560以上，则宽度固定为1 rem200 px。固定1 rem32 px第三方库一般使用px unit，无法使用rem来适应不同设备的屏幕。

em是相对单位，等于元素或父元素的fontsize值；rem:root 1rem等于根元素的fontsize值Vw(宽度)，vh:将屏幕分成100份，1ww等于屏幕的1%。1.为文件根元素设置fontsize值(会影响字体，但可以解决)//以iphone6为例，大小为30。

全称是POSTCSS 插件。一个PostCSS 插件，px 转换，变成vw和rem。这个插件主要结合了postscspxtorem和postscspxto view port的功能，简化了不常用的配置。默认情况下，vw用作优先单元，rem用作后备模式。考虑到移动设备对vw的支持不如rem，这个型号插件很好的解决了这个问题。

如果要用非标准屏幕制作大屏幕:如果要基于react实现大屏幕项目，采用rem的框架。让我们看看如何配置我们的。第一步，安装react的脚手架:第二步，将webpack抛出nodemodel。第三步，安装一些必要的依赖包。我安装了moment，echarts，echartsforreact，lodash，less，lessloader。如果有任何错误，这个地方是为antdesign配置的。不配置可能会报错，但是因为我后来的大屏方案和antdesign不兼容，所以没有用antdesign，但是这个配置还是保留了下来。

在开发一个WebApp的时候，我们通常只能从设计师那里得到一个尺寸的项目设计图，比如基于iphone6设计的，所以前端需要让这套设计稿在不同的设备型号上通用。本文介绍的方式是采用hotcss.js 插件。要在vueloader中使用px2-2插件首先安装px2remloader:根据设计稿中采用的手机型号(如iPhone6或iPhone 6)那么宽度为640 px或750/1250因此，首先在chrome调试工具中获取移动终端根元素的fontsize值，然后在配置vueloader时将其设置为参数remUnit的值:这样，在开发时就可以根据设计稿的大小写入CSS像素。即px unit、px2 rem会自动将大小转换更改为对应的rem unit，并组合不同终端生成的不同html根元素的字体大小。

1。首先需要确认UI的设计稿的基准是按照哪个设备宽度型号来设计的。通常的设计稿是按照iphone6plus的宽度设计的，也就是750 px。这样，我们得到之后，就把下面responsive.css中的@ mediascreenand(min width:320px)设置为fontsize:100px；2.responsive.css成功引入后，可以在编写页面样式时，将设计稿上的显示宽度除以2，再除以100。

postcss插件web pack 2版本之后配置发生了变化。添加了Webpack.config.js文件插件:web pack config . plugins . push(new web pack . loader options splash({ options:{ postcsloader:()> { return[require( postcsspx2rem)()} })还有一种写法，在根目录下创建一个新的postcss.config.js文件，并将其配置为 module . exports { plugins:[require( postcss-1)。