npm
官网
https://www.npmjs.com/
https://socket.dev/npm/package 非常友好的阅读npm readme
postcss-px-to-viewport
postcss-px-to-viewport-8-plugin - 升级版
postcss-px-to-viewport-update - 升级版
- px自动转vw
原理
- 元素尺寸 / 设计基准 * 100
- 通过递归解析css语法树，批量转换px
- 指定忽略的css选择器规则
npm i -D postcss-px-to-viewport
npm i -D postcss-px-to-viewport-8-plugin
npm i -D postcss-px-to-viewport-update
module.exports = {
plugins: {
'postcss-px-to-viewport': {
unitToConvert: 'px', // 需要转换的单位，默认为"px"
viewportWidth: 1920, // 设计稿的视口宽度
unitPrecision: 5, // 单位转换后保留的精度
propList: ['*'], // 能转化为vw的属性列表
viewportUnit: 'vw', // 希望使用的视口单位
fontViewportUnit: 'vw', // 字体使用的视口单位
selectorBlackList: ['--ignore'], // 需要忽略的CSS选择器包含关系 因此--ignore 表示忽略转换
minPixelValue: 1, // 最小的转换数值，如果为1的话，只有大于1的值会被转换
mediaQuery: false, // 媒体查询里的单位是否需要转换单位
replace: true, // 是否直接更换属性值，而不添加备用属性
exclude: [], // 忽略某些文件夹下的文件或特定文件
include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换，例如只转换 'src/mobile' 下的文件 (include: /\/src\/mobile\//)
landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
landscapeUnit: 'vw' // 横屏时使用的单位
}
}
}
css内敛样式转换
封装pxToVw方法
import postcss from '/postcss.config'
export const pxToVw = function pxToVw(size) {
return 100 * size / postcss.plugins['postcss-px-to-viewport'].viewportWidth + 'vw'
}
自定义vue指令 v-px-to-vw
Vue.directive('v-px-to-vw', {
inserted(element) {
// 获取元素的行内样式
const style = element.style.cssText // 正则表达式匹配 px 单位
const newStyle = style.replace(/(\d+)px/g, (match, p1) => pxToVw(Number(p1))) // 设置转换后的样式
element.style.cssText = newStyle
}
)
<template>
<div v-px-to-view style="height: 100px;width:200px;">
px-to-vw
<p class="p-txt p--ignore">
忽略转换css p--ignore
</p>
<p :style="style">
使用pxToVw方法转vw
</p>
</div>
</template>
<script>
import { pxToVw } from '@/utils/index'
export default {
computed: {
style() {
return {
fontSize: pxToVw('100px')
}
}
}
}
</script>
<style>
.p--ignore {
width: 100px;
}
.p-txt {
font-size: 20px; // 20vw
}
</style>
社区
postcss-px-to-viewport 在npm有很多或扩展的版本，可以仔细研究下。
postcss-px-to-viewport-update: 增加了单行css注释编译
.class2 {
padding-top: 10px; /* px-to-viewport-ignore */
/* px-to-viewport-ignore-next */
padding-bottom: 10px;
/* Any other comment */
border: 1px solid black;
margin-bottom: 1px;
font-size: 20px;
line-height: 30px;
}
js注释
函数参数注释
/**
* @name sleep 延迟
* @description Sleep
* @param {string} time - 100
* @returns {Promise} - a promise
* **/
function sleep(time) {
return new Promise((resolve) => setTimeout(resolve, time))
}
/**
* @param { HTMLElement } element
* @param {Window} window
* **/
function resize(element, window) {}
变量声明注释
/** @type {{ name: string; age: number }} */
let person
/** @type {(s: string, b: boolean) => void} */
let myCallback
/** @type {number[]} */
let years
/**
- @typedef {object} Color
- @property {number} chroma
- @property {number} hue
*/
/** @type {Color[]} */
const colors = [
{ chroma: 0.2, hue: 262 },
{ chroma: 0.2, hue: 28.3 }
]
从 *.d.ts 文件导入类型：
/** @param {import('./types').User} user */
const deleteUser = (user) => {}
