网站使用功能介绍是用什么软件做的,关于网站建设的技巧,给别人做网站必须有icp,微信小程序开发代码作为一名前端开发#xff0c;在做移动端适配时rem、vw是我们经常用到的单位#xff0c;但是我们在实际开发过程中需要将设计稿上的px转换成rem#xff0c;如果手动去计算#xff0c;将是一个很耗时、费力的过程。这是就需要一个工具可以帮我们自动将px转成rem、vw。开始之前…作为一名前端开发在做移动端适配时rem、vw是我们经常用到的单位但是我们在实际开发过程中需要将设计稿上的px转换成rem如果手动去计算将是一个很耗时、费力的过程。这是就需要一个工具可以帮我们自动将px转成rem、vw。开始之前我们先来了解一个概念【PostCSS】PostCSS是一个用 JavaScript 工具和插件转换 CSS 代码的工具类似babel对js的处理。常见的功能如1 . 使用下一代css语法(cssnext)2 . 自动补全浏览器前缀(autoprefixer)3 . 自动把px代为转换成rem/vw(postcss-pxtorem/postcss-px-to-viewport)4 . css代码压缩等等PostCSS 只是一个工具本身不会对css一顿操作一般不单独使用而是与已有的构建工具进行集成通过插件实现功能。PostCSS 与主流的构建工具如 Webpack、Grunt 和 Gulp 都可以进行集成。完成集成之后选择满足功能需求的 PostCSS 插件并进行配置。Webpack 中使用 PostCSS 插件示例postcss-loader 用来对.css 文件进行处理并添加在 style-loader 和 css-loader 之后。通过一个额外的 postcss 方法来返回所需要使用的 PostCSS 插件。require(autoprefixer) 的作用是加载 Autoprefixer 插件。言归正传接下来我们看一下如果使用PostCSS把px自动转成rem、vwpostcss-pxtorem功能把px转换成rem安装npm install postcss-pxtorem --save-dev配置项postcss-pxtorem:{rootValue:100,// html节点设的font-size大小由于chrome最小12px所以基值要设置大写unitPrecision:5,// 转rem精确到小数点多少位propList:[font,font-size,line-height,letter-spacing],// 指定转换成rem的属性支持 * selectorBlackList:[],// str或reg 指定不转换的选择器str时包含字段即匹配replace:true,mediaQuery:false,// 媒体查询内的px是否转换minPixelValue:0// 小于指定数值的px不转换}postcss-px-to-viewport之前做移动端适配时基本上是采用rem方案。但随着viewport越来越被大家熟悉我们似乎发现了一种更好的方案。功能将px单位自动转换成viewport单位安装npm install postcss-px-to-viewport --save-dev配置项postcss-px-to-viewport: {unitToConvert:px //要转换的单位默认是pxviewportWidth: 750, // 视窗的宽度对应的是我们设计稿的宽度一般是750默认是320viewportHeight: 1334, // 视窗的高度根据750设备的宽度来指定一般指定1334也可以不配置unitPrecision: 3, // 指定px转换为视窗单位值的小数位数默认是5propList: [*], //指定可以转换的css属性默认是[*]代表全部属性进行转换viewportUnit: vw, //指定需要转换成的视窗单位建议使用vwfontViewportUnit: vw, //指定字体需要转换成的视窗单位默认vwselectorBlackList: [.ignore],// 指定不转换为视窗单位的类可以自定义可以无限添加建议定义一至两个通用的类名minPixelValue: 1, // 小于或等于1px不转换为视窗单位你也可以设置为你想要的值mediaQuery: false, // 允许在媒体查询中转换pxreplace: true,exclude: [], //设置忽略文件如node_modules}
