postcss-px-to-viewport插件教程
简介用途视口单位(Viewport units)示例安装配置参数使用简介
将px单位转换为视口单位的(vw,vh,vmin,vmax)的PostCSS插件
用途
如果你的样式需要根据视口大小来调整宽度,这个脚本可以将你的CSS中的px
转化为vw
视口单位(Viewport units)
在PC端,视口指的是在PC端,指的是浏览器的可视区域;
而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。
视口单位中的“视口”,PC端指的是浏览器的可视区域;移动端指的就是Viewport中的Layout Viewport。
根据CSS3规范,视口单位主要包括以下4个:
1.vw:1vw等于视口宽度的1%。2.vh:1vh等于视口高度的1%。3.vmin:选取vw和vh中最小的那个。4.vmax:选取vw和vh中最大的那个。
示例
输入
.class{ width:100px; height:100px;}
输出
.class{ width:31.25vw; height:31.25vw;}
安装
$ npm install postcss-px-to-viewport --save-dev
配置参数
默认参数
{unitToConvert: 'px',viewportWidth: 320,unitPrecision: 5,propList: ['*'],viewportUnit: 'vw',fontViewportUnit: 'vw',selectorBlackList: [],minPixelValue: 1,mediaQuery: false,replace: true,exclude: undefined,include: undefined,landscape: false,landscapeUnit: 'vw',landscapeWidth: 568}
unitToConvert (String) 需要转换的单位,默认为"px"viewportWidth (Number) 设计稿的视口宽度unitPrecision (Number) 单位转换后保留的精度propList (Array) 能转化为vw的属性列表viewportUnit (String) 希望使用的视口单位fontViewportUnit (String) 字体使用的视口单位selectorBlackList (Array) 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位minPixelValue (Number) 设置最小的转换数值,如果为1的话,只有大于1的值会被转换mediaQuery (Boolean) 媒体查询里的单位是否需要转换单位replace (Boolean) 是否直接更换属性值,而不添加备用属性exclude (Array or Regexp) 忽略某些文件夹下的文件或特定文件,例如 ‘node_modules’ 下的文件landscape (Boolean) 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)landscapeUnit (String) 横屏时使用的单位landscapeWidth (Number) 横屏时使用的视口宽度
使用
在postcss.config.js
添加如下配置
module.exports = {plugins: {autoprefixer: {},"postcss-px-to-viewport": {viewportWidth: 375, //视口的宽度,对应的时设计稿的宽度/2,一般为750,对应iPhone6的宽度viewportHeight: 667, //视口的高度,对应的是设计稿的高度(也可以不配置)unitPrecision: 5, //指定‘px’转换为视口单位值的小数位数(很多时候无法整除)小数位为5位viewportUnit: 'vw', //指定需要转换成的视口单位,建议使用vw(宽度)selectorBlankList: ['ignore'], //指定不需要转换的类(class类名,使用ignore,在元素的class里加入ignore,则该元素里的px不会进行转化)minPixelValue: 1, //小于或等于‘1px’不转换为视口单位mediaQuery: false,//允许在媒体查询中转换为‘px’,使用媒体查询,再对一些东西进行配置exclude: [/TabBar/] //不需要转化的组件文件名正则,必须是正则表达式}}}
如果觉得《postcss-px-to-viewport插件教程和适配问题(移动端和PC端)》对你有帮助,请点赞、收藏,并留下你的观点哦!