include: [/src/], // 如果设置了include,那将只有匹配到的文件才会被转换 landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape) landscapeUnit: 'vw', // 横屏时使用的单位 landscapeWidth: 1920, // 横屏时使用的视口宽度 }), ] } } }); 1. 2. ...
viewportWidth:750,// 视窗的宽度,对应的是我们设计稿的宽度,一般是750viewportHeight:1334,// 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置unitPrecision:3,// 指定`px`转换为视窗单位值的小数位数viewportUnit:"vw",//指定需要转换成的视窗单位,建议使用vwselectorBlackList: ['.ignore'],/...
如果你的样式需要做根据视口大小来调整宽度,这个脚本可以将你CSS中的px单位转化为vw,1vw等于1/100视口宽度。 输入 .class{margin:-10px .5vh;padding:5vmin 9.5px 1px;border:3px solid black;border-bottom-width:1px;font-size:14px;line-height:20px;}.class2{padding-top:10px;/* px-to-viewport-ign...
375:750;return{plugins:{autoprefixer:{},"postcss-px-to-viewport":{unitToConvert:"px",// 要转化的单位viewportWidth:viewWidth,// UI设计稿的宽度unitPrecision:6,// 转换后的精度,即小数点位数propList:["*"],// 指定转换的css属性的单位,*代表全部css属性的单位都进行转换viewportUnit:"vw",// 指...
根据你的项目需求,确定需要转换的 px 单位范围、视口宽度等。例如,如果你的设计稿是基于 375px 宽度的移动设备,你可能希望将视口宽度设置为 375。 在PostCSS 配置文件中添加插件: 在你的 PostCSS 配置文件中(通常是 postcss.config.js),添加 postcss-px-to-viewport-8-plugin 插件,并根据你的需求配置选项。以下...
viewportWidth:视口的宽度,默认值为设计稿的宽度。 viewportHeight:视口的高度,默认值为设计稿的高度。 unitPrecision:转换后的视口单位的精度。 viewportUnit:希望使用的视口单位,默认为 'vw'。 selectorBlackList:需要忽略转换的 CSS 选择器列表。 minPixelValue:设置最小的转换数值,默认值为 1。 应用场景 移动端...
插件的核心是根据视窗的宽度计算出一个转换比例,通过将px值除以比例得到相应的vw、vh或者vmin值。例如,如果视窗宽度为320px,转换比例设置为0.01,那么10px会被转换为1vw。 通过这种方式,可以实现移动端页面的适配,使得页面在不同的设备上能够有相对稳定的显示效果,同时也能够避免了在不同屏幕尺寸下元素过大或过小的...
2019-12-20 19:10 −元素偏移量offset系列 offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移),大小等 获得元素距离带有定位父元素的位置 获得元素自身的大小(宽度高度) 注意:放回的数值都不带单位 offset系列常用属性 offset... ...
A plugin for PostCSS that generates viewport units (vw, vh, vmin, vmax) from pixel units. The best choice to create a scalable interface on different displays by one design size.
module.exports= {plugins: {'postcss-px-to-viewport-8-plugin': {unitToConvert:'px',// 需要转换的单位,默认为"px"viewportWidth:750,// 设计稿的视口宽度unitPrecision:5,// 单位转换后保留的精度propList: ['*','!font-size'],// 能转化为vw的属性列表,!font-size表示font-size后面的单位不会被...