精华内容
下载资源
问答
  • postcss-pxtorem 的插件,可从像素单位生成rem单位。 安装 $ npm install postcss postcss-pxtorem --save-dev 用法 像素是最容易使用的单位(观点)。 它们的唯一问题是它们不允许浏览器将默认字体大小更改为16。...
  • 主要介绍了vue3.0中使用postcss-pxtorem的具体方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • postcss-pxtorem 移动端px to rem 例如设计师给出640px的设计稿,写css样式的时候,就按照640px切图,单位px。 完工后,js或者css媒体查询,设定1rem的值。例如1rem == 40px。那么我们只 需要把css文件里面的px换算...
  • 主要介绍了关于vue利用postcss-pxtorem进行移动端适配的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 前端开源库-postcss-px2remPostSS-PX2REM,PostSS版本的PX2REM
  • 今天,我们使用Vue CLI3 做一个移动端适配 。   前言 首先确定你的项目是Vue CLI3版本以上的。 一、移动端适配包 1、安装移动端适配包 npm i lib-flexible -S 2、在 main.js 引入适配包 ...import 'lib-flexible' // ...
  •  因为 postcss-plugin-px2rem 这个插件 配置选项上有 exclude 属性,它可以配置 是否对 某个文件夹下的所有css文件不进行从pxrem的转换。  所以我们可以利用这个特性,把项目中的 node_module 文件夹排除掉。...

    在vue-cli3.0中使用postcss-plugin-px2rem 插件

    插件的作用是 自动将vue项目中的px转换为rem 
    postcss-plugin-px2rem优势:
      因为 postcss-plugin-px2rem 这个插件  配置选项上有  exclude 属性,它可以配置 是否对 某个文件夹下的所有css文件不进行从px到rem的转换。
      所以我们可以利用这个特性,把项目中的  node_module 文件夹排除掉。这样如果我们项目中是用了,前端UI框架的话,就不会吧UI框架(Vant,Element等)中的 px单位转换成rem了
    文档:
    postcss-plugin-px2rem官方文档:https://www.npmjs.com/package/postcss-plugin-px2rem
    postcss-pxtorem官方文档:https://www.npmjs.com/package/postcss-pxtorem
    postcss-px2rem官方文档:https://www.npmjs.com/package/postcss-px2rem

    安装插件(安装对应包)

    npm i postcss-plugin-px2rem  --save -dev
    或
    npm i postcss-pxtorem  --save -dev
    或
    npm i postcss-px2rem --save -dev
    或
    npm i postcss-loader --save-dev

    配置方法

    在vue-cli3.0中。去掉了build和config文件夹。所有的配置都放到了vue.config.js中(默认为空,如果没有这个文件自己写一个)

    module.exports = {
        //px转rem的配置(postcss-plugin-px2rem插件)
        lintOnSave: true,
        css: {
            loaderOptions: {
                postcss: {
                    plugins: [
                        require('postcss-plugin-px2rem')({
                            // rootValue: 100, //换算基数, 默认100  ,这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
                            // unitPrecision: 5, //允许REM单位增长到的十进制数字。
                            //propWhiteList: [],  //默认值是一个空数组,这意味着禁用白名单并启用所有属性。
                            // propBlackList: [], //黑名单
                            exclude: /(node_module)/,  //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值
                            // selectorBlackList: [], //要忽略并保留为px的选择器
                            // ignoreIdentifier: false,  //(boolean/string)忽略单个属性的方法,启用ignoreidentifier后,replace将自动设置为true。
                            // replace: true, // (布尔值)替换包含REM的规则,而不是添加回退。
                            mediaQuery: false,  //(布尔值)允许在媒体查询中转换px。
                            minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
                        }),
                    ]
                }
            }
        },
    }

    在vue-cli3中使用postcss-pxtorem和 postcss-px2rem 配置类似,如下

    使用postcss-pxtorem 时vue.config.js配置

    module.exports = {
        lintOnSave: true,
        css: {
            loaderOptions: {
                postcss: {
                    plugins: [
                        require('postcss-pxtorem')({//这里是配置项,详见官方文档
                            rootValue : 1, // 换算的基数
                            selectorBlackList  : ['weui','mu'], // 忽略转换正则匹配项
                            propList   : ['*'],
                        }),
                    ]
                }
            }
        },
    }

    使用postcss-px2rem时的vue.config.js配置

    //方式一(♥):
    const px2rem = require('postcss-px2rem')
    const postcss = px2rem({
        remUnit: 75   //基准大小 baseSize,需要和rem.js中相同
    })
    
    module.exports = {
        /* 注意sass,scss,less的配置 */
        productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
        css: {
            loaderOptions: {
                postcss: {
                    plugins: [
                        postcss
                    ]
                }
            }
        }
    }
    
    //====================================================================
    //方式二:
    module.exports = {
        lintOnSave: true,
        css: {
            loaderOptions: {
                postcss: {
                    plugins: [
                        require('postcss-px2rem')({ //配置项,详见官方文档
                            remUnit: 30
                        }), // 换算的基数
                    ]
                }
            }
        },
    }
    
    //====================================================================
    //方式三:
    var px2rem = require('postcss-px2rem');
    
    module.exports = {
      module: {
        loaders: [
          {
            test: /\.css$/,
            loader: "style-loader!css-loader!postcss-loader"
          }
        ]
      },
      postcss: function() {
        return [px2rem({remUnit: 75})];
      }
    }

    如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px


    public/index.html下

    <script>
        const baseSize = 100 // 基准值
        function setRem() {
          // 相对于1920像素的缩放比
          let scale = document.documentElement.clientWidth / 1920
          // 根据屏幕变化 1rem 对应的 font-size
          scale = scale > 1 ? 1 : scale;
          const realFont = baseSize * scale
          document.documentElement.style.fontSize = realFont + 'px'
        }
        setRem()
        window.onresize = () => {
          setRem()
        }
    </script>
    

    安装postcss-px2rem

    npm install postcss-px2rem -D

    vue.config.js中配置

    const px2rem = require('postcss-px2rem')
    
    const postcss = px2rem({
      remUnit: 100 // 基准值
    })
    
    module.exports = {
      publicPath: './',
      css: {
        loaderOptions: {
          postcss: {
            plugins: [
              postcss
            ]
          }
        }
      }
    }
    

    vue中使用px,会自动转化为rem

    .home {
      font-size: 25px; // --> font-size: 0.25rem; (25 / 基准值)
    }
    

     

     

    展开全文
  • 如果是在750的设备,那么1vw即为7.5px,以此标准,13.3333vw == 100px,所以直接给根节点的 字体大小就为13.333vw,然后要做200200的容器,由于根节点的字体大小为100px,所以此时我们只需要给容器宽高各位2rem,...

    移动端自适应布局方案

    1:常规实现思路:

    常规的实现思路就是监听屏幕分辨率的变化动态修改根节点的字体大小,而页面布局单位用rem,这个地方可以借助与vw单位,如要在750分辨率设备做一个200*200的容器

    基本思路:如果是在750的设备,那么1vw即为7.5px,以此标准,13.3333vw == 100px,所以直接给根节点的 字体大小就为13.333vw,然后要做200200的容器,由于根节点的字体大小为100px,所以此时我们只需要给容器宽高各位2rem,就能得到200px200px的容器,又由于vw是一个根据屏幕宽度动态计算的值,所以能够自动实现自适应布局方案

    2:借助lib-flexible以及postcss-pxtorem插件:

    插件介绍:

    lib-flexible:这个插件是去动态修改根节点的字体大小的,默认情况下,自动设置为根节点的字体大小为屏幕宽度的十分之一(也就是说默认缩放值为10),也就是说如果屏幕宽度为750,那么根节点字体大小自动设置为75px

    postcss-pxtorem:这个插件作用是自动把你项目里面写的全部px单位转换为rem单位,比如给这个插件的rootvalue值为20,那么比如你项目当中写的200px就会自动转为为10rem,也就是 页面写的px尺寸 / rootValue = 转换后的rem单位大小

    插件总结:

    lib-flexible:相当于这个插件是控制 1 rem 具体的大小根据屏幕分辨率自动跳转

    postcss-pxtorem:这个插件是控制px转换到rem的值

    插件使用(vue模板案例 设计图为750px):

    lib-flexible
    1:npm install lib-flexible --save-dev
    2:main.js中引入:import ‘lib-flexible’

    postcss-pxtorem
    1:npm install postcss-pxtorem -D
    2:vue/cli3及以上webpack编译配置

    //vue.config.js
    > `module.exports = {
    
            lintOnSave: true,
        
            css: {
        
                loaderOptions: {
        
                    postcss: {
        
                        plugins: [
        
                            require('postcss-pxtorem')({
                                //这个值的作用是把页面写的px转为多少rem,比如页面写的是200px,那么转换成的rem值就是  200 / 这个值
                                rootValue : 75, // 这个值得到75的原因是因为,lib-flexible默认设置根节点字体大小为屏幕分辨率 /  10,而这个地方rootValue的缩放比例必须跟控制根节点字体大小的缩小比例相同,所以这个地方默认就是缩小10倍
        
                                propList  : ['*'],
        
                            }),
        
                        ]
        
                    }
        
                }
        
            },
        
        }
    

    3:vue/cli2的webpack编译配置
    package.json 需要安装3个插件

    	//package.json
        "postcss": "^8.3.9",
        "postcss-loader": "^6.2.0",
        "postcss-pxtorem": "^6.0.0",
    
    		//vue.config.js
    'use strict'
    module.exports = {
        css: {
    
            loaderOptions: {
    
                postcss: {
    
                    plugins: [
    
                        require('postcss-pxtorem')({
                            //这个值的作用是把页面写的px转为多少rem,比如页面写的是200px,那么转换成的rem			值就是  200 / 这个值
                            rootValue : 144, // 这个是换算的单位,也就是说如果页面写的是
    
                            propList  : ['*'],
    
                        }),
    
                    ]
    
                }
    
            }
    
        },
    }
    
    

    3:自定义lib-flexible:

    很多时候其实不借助lib-flexible也可以,我们自己完全可以手动实现一个lib-flexible
    1:utils中写一个js文件动态配置根节点字体大小

    function setRem () {
    
        let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    //得到html的Dom元素
        let htmlDom = document.getElementsByTagName('html')[0];
    //设置根元素字体大小
        console.log(htmlWidth/10 + 'px',33333333333333333);
        htmlDom.style.fontSize= htmlWidth / 缩放比例值,默认可以为10 + 'px';
    }
    // 初始化
    setRem();
    // 改变窗口大小时重新设置 rem
    window.onresize = function () {
        setRem()
    }
    

    2:main.js引入

    import './libs.js';
    

    4:总结:

    也就是说lib-flexible中的 默认缩放比例值 * postcss的rootValue必须等于设计稿的宽度,而lib-flexible默认的缩放比例值就为10,或者自定义的lib-flexible可以自己随便定义,这时候一定要动态修改postcss的rootValue的值

    展开全文
  • react 移动端项目配置 postcss-pxtorem

    千次阅读 2019-06-11 10:18:07
    前提 *create-react-app 创建的项目 ...postcss-pxtorem npm i postcss-pxtorem -D 添加rem转换插件 webpack.config.js //104行 require('postcss-pxtorem')({ rootValue : 100, selectorBlackLi...

    前提

    *create-react-app 创建的项目
    通过 eject 命令暴露出react 全部配置 
    

    安装配置

    postcss-pxtorem

    npm i postcss-pxtorem -D
    

    添加rem转换插件

    webpack.config.js 
    //104行
    require('postcss-pxtorem')({
    	rootValue : 100,
    	selectorBlackList  : [], //过滤
    	propList   : ['*'],
    })
    

    排错

    使用less css文件为什么rem转换没有生效,

     create-react-app 的postcss配置都在getStyleLoaders函数中
     在104行添加的转换工具插件没有错
     检查427行以下发现
     //less less-loader
     如图1 
     create-react-app 默认scss css自行配置less 要应用getStyleLoaders, rem转换工具就生效了
     效果 如图2
    
    图 1

    image

    图 2

    前提

    *create-react-app 创建的项目
    通过 eject 命令暴露出react 全部配置 
    

    安装配置

    postcss-pxtorem

    npm i postcss-pxtorem -D
    

    添加rem转换插件

    webpack.config.js 
    //104行
    require('postcss-pxtorem')({
    	rootValue : 100,
    	selectorBlackList  : [], //过滤
    	propList   : ['*'],
    })
    

    排错

    使用less css文件为什么rem转换没有生效,

     create-react-app 的postcss配置都在getStyleLoaders函数中
     在104行添加的转换工具插件没有错
     检查427行以下发现
     //less less-loader
     如图1 
     create-react-app 默认scss css自行配置less 要应用getStyleLoaders, rem转换工具就生效了
     效果 如图2
    
    图 1

    image

    图 2

    image

    展开全文
  • 写这篇博客的原因在于,网上很多postcss-pxtorem 插件的配置都无法生效(原因在于创建项目的工具如vue-cli版本等的不同),生生地浪费了很多时间。于是重新整理下,套用下个神棍点地说法,就是亲测有效~~哈哈。 二,...

    一,原因

    既然看到这篇博客,说明各位已经知道为啥要做rem适配,以及rem适配的原理。
    写这篇博客的原因在于,网上很多postcss-pxtorem 插件的配置都无法生效(原因在于创建项目的工具如vue-cli版本等的不同),生生地浪费了很多时间。于是重新整理下,套用下个神棍点地说法,就是亲测有效~~哈哈。

    二,使用postcss-pxtorem 的方法

    0,无效原因

    我的项目是使用vue-cli3创建的,网上很多方法说安装这个插件生成.postcss.js文件啊,或者在根目录新建postcss.config.js文件的方法,都是已经不行了的,反正我跪了,哪位大佬头铁,也可以再试试~
    另外,需要注意的是,修改了vue.config.js文件的配置之后,需要重启项目才会生效。

    1,安装

    npm install postcss-pxtorem --save
    

    完成的标志是package.json中生成对应依赖:
    在这里插入图片描述

    2,配置

    vue-cli3创建的文件,现在改为在vue.config.js文件中进行配置:

     module.exports={
        css: {
            loaderOptions: {
                postcss: {
                    plugins: [
                        require('postcss-pxtorem')({ // 把px单位换算成rem单位
                            rootValue: 37.5, //换算基数, 
                            unitPrecision: 3, //允许REM单位增长到的十进制数字,小数点后保留的位数。
                            propList: ['*'],
                            exclude: /(node_module)/,  //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值
                            selectorBlackList: ['.van'], //要忽略并保留为px的选择器,本项目我是用的vant ui框架,所以忽略他
                            mediaQuery: false,  //(布尔值)允许在媒体查询中转换px。
                            minPixelValue: 1 //设置要替换的最小像素值
                        })
                    ]
                }
            }
        }
    }
    

    3,配置完成的标志

    因为刚修改vue.config.js,要让他生效,需要重新运行项目
    因为rem的原理就是根据根组件html来计算尺寸,所以为了验证这个是否安装,我可以打开项目运行后的浏览器,F12,然后先手动设置html的字体大小:
    在这里插入图片描述
    于是页面尺寸:
    在这里插入图片描述

    三,配套使用rem.js

    从上文可以知道,rem单位是以html的font-size作为基准实现页面尺寸布局的,那么这样子,如果根节点的font-size我们一直写死37.5px的话,页面的自适应便无法实现了。
    为了达到不同的设备宽度对应不同的font-size样式,需要一个js文件,让它实时监听窗口的尺寸变化,从而改变font-size的值:
    新建rem.js文件:

    // 基准大小
    const baseSize = 37.5
    // 设置 rem 函数
    function setRem () {
      // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。
      const scale = document.documentElement.clientWidth / 750
      // 设置页面根节点字体大小
      document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
    }
    // 初始化
    setRem()
    // 改变窗口大小时重新设置 rem
    window.onresize = function () {
      setRem()
    }
     
    

    然后再在main.js文件中引入即可:

    //移动端rem适配文件
    import './util/rem.js'
    
    展开全文
  • postcss-pxtorem 可以把你的px转化成rem(好用推荐) 说说怎么用吧: 第一步: npm install postcss-pxtorem -D 第二步引入: 方法一: 在vue.config.js中 module.exports = { css: { loaderOptions: { ...
  • 基于postcss-pxtorem的vue项目响应式布局 最近在开发一个门户网站,用到了媒体查询响应式布局和postcss-pxtorem,下面做个小总结,方便以后使用。 安装amfe-flexible和postcss-pxtorem npm install amfe-flexible ...
  • 今天安装postcss-pxtorem 准备将 px 单位转换为rem单位 安装完插件后并创建文件夹postcss.config.js 配置文件为如下 重新编译运行 报下面错误 报错让我把browserslist 放在 package.json文件里面 或者....
  • 此适配方案是每次屏幕尺寸或分辨率发生...npm install postcss-pxtorem -D 2、在根目录创建postcss.config.js文件 module.exports = { plugins: { autoprefixer: {}, "postcss-pxtorem": { rootValue: 19.2, ...
  • 如何在vue-cli3.0中使用postcss-plugin-px2rem 插件 ...因为 postcss-plugin-px2rem 这个插件 配置选项上有 exclude 属性,它可以配置 是否对 某个文件夹下的所有css文件不进行从pxrem的转换。 所以我们可以利用...
  • 提示:用vue-cli 3.0搭建的vue 2.0项目中使用prostcss prostcss-pxto...npm install postcss-pxtorem --save 二、创建postcss.config.js 在根目录新建postcss.config.js文件,内容如下 module.exports = { plugins:
  • postcss-pxtorempostcss-px-to-viewport都是PostCSS的插件,用于将像素单元生成rem单位或者vw单位。 前端开发还原设计稿的重要性毋庸置疑,目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值,...
  • vue-cli创建完项目之后安装amfe-flexible和postcss-pxtoremnpm i amfe-flexible -Snpm i postcss-pxtorem -Damfe-flexible来根据屏幕动态改变根元素font-size,postcss-pxtorem把代码中px转为rem;在项目根目录建vue....
  • postcss-pxtorem 官方文档 在react项目中安装postcss-pxto...安装完成在webpack.config.js 目录下面配置安装好的postcss-pxtorem 配置如下 代码部分:参数具体说明参考上面的官方文档 require('postcss-pxtorem')({.
  • 因为 postcss-plugin-px2rem 这个插件 配置选项上有 exclude 属性,它可以配置 是否对 某个文件夹下的所有css文件不进行从pxrem的转换。 所以我们可以利用这个特性,把项目中的 node_module 文件夹排除掉。这样...
  • 移动端适配: 为什么要适配呢?使用px单位设置页面的大小时,不进行适配处理,在不同的设备中显示结果是这样的,分辨率...适配的方法有很多种,本节介绍之前开发项目使用的适配方法:使用post-loader 加 postcss-pxto...
  • react安装postcss-pxtorem

    千次阅读 2018-12-19 16:04:06
    需求 在react项目中安装插件,实现按照设计图中的标注输入px,自动转换成rem。...配置postcss-pxtorem 1、安装插件:npm install postcss-pxtorem --save-dev 2、打开文件:webpack.config.dev.js 3、修改...
  • react配置postcss-pxtorem

    千次阅读 2019-08-02 15:49:46
    1.通过 eject 命令暴露出react 全部配置 ...npm i postcss-pxtorem -D 3.配置 webpack.config.js require('postcss-pxtorem')({ rootValue : 100, selectorBlackList : [], //过滤 propList : ['*']...
  • 这应该是vue项目在适配移动端时候,最简单的方法之一 下面是基本步骤(使用cnpm) 1.下载并引入lib-flexible cnpm install --save lib-flexible ...cnpm install --save px2rem-loader 3.将px...
  • 既然是使用postcss-pxtorem对移动端项目进行适配,那肯定先要安装它,于是我们在电脑上敲下这行命令 npm install postcss-pxtorem -D postcss-pxtorem有一个好伙伴amfe-flexible,也需要一并安装。 npm install
  • postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem 文档:https://github.com/cuth/postcss-pxtorem lib-flexible 用于设置 rem 基准值 文档:https://github.com/amfe/lib-flexible 一、使用 lib-...
  • recalc() } 方案二: 不缩放 + rem ` ` 只需监听屏幕变化 设置font-size 缺点:分辨率 细节不清晰 开发书写: 1、写开发时写rem 2、开发时写px — 插件转 rem( postcss-pxtorempostcss-px2rem、 postcss-px-...
  • 可查看文档:https://github.com/cuth/postcss-pxtorem  在vue-cli2中的设置: 在.postcssrc.js文件中设置: ...postcss-pxtorem":{ rootValue: 75, unitPrecision: 5, // 最小精度,小数...
  • 这里记录一个vue-cli3.0 配置的移动端 以及postcss-pxtorem 的使用yarn add postcss-pxtorem -D复制代码1、首先利用 vue-cli3.0 创建的项目会自带一个postcss.config.jsmodule.exports = { plugins: { autoprefixer:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,119
精华内容 1,247
关键字:

postcss-pxtorem配置