postcss-px-to-viewport

简介: 【8月更文挑战第10天】

【8月更文挑战第9天】 autoprefixer: {},
'postcss-px-to-viewport': {
unitToConvert: 'px', //将要转化的单位
viewportWidth: 750, //(Number)视图的宽度
unitPrecision: 3, //(Number)指定px转换为视窗单位值的小数位数,默认是5
propList: [''], //(Array)指定可以转换的css属性,默认是[''],代表全部属性进行转换
viewportUnit: 'vw', //(String)指定需要转换成的视窗单位,默认vw
fontViewportUnit: 'vw', //(String)指定字体需要转换成的视窗单位,默认vw
selectorBlackList: ['.ignore', '.hairlines'], // (Array) 指定不转换为视窗单位的类,保留px,值为string或正则regexp,建议定义一至两个通用的类名
minPixelValue: 1, //(Number) 默认值1,小于或等于1px不转换为视窗单位,
mediaQuery: false, // (Boolean) 是否在媒体查询时也转换px,默认false
replace: true, //替换包含vw的规则,而不是添加回退。
exclude: [], // (Array or Regexp) 设置忽略文件,如node_modules
landscape: false,
landscapeUnit: 'vw',
landscapeWidth: 568
}
}
如果你的样式需要做根据视口大小来调整宽度,这个脚本可以将你CSS中的px单位转化为vw,1vw等于1/100视口宽度。

之前做移动端适配时,基本上是采用rem方案,现在发现了一个新的方案,就是用viewport单位,现在viewport单位越来越受到众多浏览器的支持

相关文章
|
资源调度 前端开发
postcss-px-to-viewport 屏幕适配方案
postcss-px-to-viewport 屏幕适配方案
|
XML JSON 前端开发
前端深浅拷贝各有哪些方法,优缺点
前端深浅拷贝各有哪些方法,优缺点
327 0
|
移动开发 小程序 前端开发
uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏?三种解决办法
uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏?三种解决办法
el-popover 点击取消按钮,弹窗仍然无法关闭
el-popover 点击取消按钮,弹窗仍然无法关闭
|
JavaScript
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】
文章详细介绍了在Vue项目中安装和使用`vue-quill-editor`的步骤,包括如何通过npm安装、局部挂载、在Vue页面中引入和配置使用。同时,还提供了如何实现图片的缩放和拖拽功能的进阶教程,涉及到安装额外的插件`quill-image-drop-module`和`quill-image-resize-module`,以及对Webpack配置的调整。最后,文章还提供了实际效果展示和一些后续可能的拓展功能,如上传视频和将图片上传到服务器等。
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】
|
JavaScript 前端开发 应用服务中间件
Nginx——一个域名下部署多个Vue项目
如何在同一域名下部署第二个Vue项目而不影响现有项目:更新`vue.config.js`,设置`publicPath`为`/screen/`。修改Vue Router的`base`为`screen`。在Nginx配置中添加新location `/screen`,指向第二项目`dist`目录。测试访问`http://<域名>/screen/`。别忘了检查并修复任何遗漏的配置,如数据看板默认设置。
975 2
|
JavaScript 前端开发 Java
花了一天时间, 搜刮的个人觉得不错的16套vue3后台管理模版
花了一天时间, 搜刮的个人觉得不错的16套vue3后台管理模版
5781 2
花了一天时间, 搜刮的个人觉得不错的16套vue3后台管理模版
|
JavaScript
vue + d3.js(v6) 绘制【柱状图/条形图】(含动画和交互)
vue + d3.js(v6) 绘制【柱状图/条形图】(含动画和交互)
246 0