npm install gulp-postcss var gulp = require('gulp'); var postcss = require('gulp-postcss'); var rem2px = require('postcss-rem2px'); gulp.task('default', function() { var processors = [rem2px({...options})]; return gulp.src('./src/*.css') .pipe(postcss(processors)) .pipe(...
npm install grunt-postcss module.exports = function(grunt) { grunt.initConfig({ postcss: { options: { processors: [ px2rem({remUnit: 75}) ] }, dist: { src: 'src/*.css', dest: 'build' } } }); grunt.loadNpmTasks('grunt-postcss'); grunt.registerTask('default', ['postcss']);...
AI代码解释 (function(){functionsetRootFontSize(){letdpr,rem,scale,rootWidth;letrootHtml=document.documentElement;dpr=window.devicePixelRatio||1;//移动端必须设置//限制展现页面的最小宽度rootWidth=rootHtml.clientWidth<1366?1366:rootHtml.clientWidth;rem=rootWidth*dpr/19.2;// 19.2 = 设计图尺寸宽1920...
在移动端做适配有几种方法,今天来聊聊amfe-flexible和postcss-plugin-px2rem。 amfe-flexible:动态改变根字体的大小(会在html上自动添加上font-size); postcss-plugin-px2rem: 编译时,根据字根的大小,将px转换成rem。 安装 1. 安装amfe-flexible npm install-Samfe-flexible 2. 在main.js中引入 import'amfe-fl...
npm i postcss-px2rem --save-dev 1. 2、在webpack.config.js文件中配置。 备注:项目这样配置后,整个项目中的css样式中px单位,都会进行换算 const px2rem = require('postcss-px2rem'); 1. new webpack.LoaderOptionsPlugin({ vue: { postcss: function () { ...
npm i postcss-pxtorem@5.1.1 postcss --save -dev 配置: module.exports = { plugins: { autoprefixer: {}, "postcss-pxtorem": { // 把px单位换算成rem单位 rootValue: 100, //换算基数, 默认100 ,这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上...
postcss-px2rem官方文档:https://www.npmjs.com/package/postcss-px2rem postcss-loader官方文档:https://webpack.docschina.org/loaders/postcss-loader/ postcss-plugin-px2rem不做过多赘述,可以看下“在移动端使用amfe-flexible和postcss-plugin-px2rem做适配”这篇。
要使用PostCSS px2rem,首先需要使用npm在你的项目目录下全局安装PostCSS和PostCSS px2rem插件。你可以使用以下命令来进行安装: npm install postcss postcss-px2rem save-dev 第二步:配置PostCSS 在你的项目中创建一个postcss.config.js文件,用于配置PostCSS插件。在该文件中,导入并使用postcss-px2rem插件,并设置适当...
npminstallamfe-flexible-Snpminstallpostcss-px2rem-S postcss-px2rem会将px转换为rem,rem单位用于适配不同宽度的屏幕,根据标签的font-size值来计算出结果,1rem=html标签的font-size值 二、第二步引入 lib-flexible 在入口main.js中引入lib-flexibleimport"amfe-flexible"; ...
npm i postcss-px2rem --save -dev 或 npm i postcss-loader --save-dev 1. 2. 3. 4. 5. 6. 7. 配置方法 在vue-cli3.0中。去掉了build和config文件夹。所有的配置都放到了vue.config.js中(默认为空,如果没有这个文件自己写一个) module.exports = { ...