首页
壁纸
直播
留言
关于
友链
统计
Search
1
tampermonkey油猴和谷歌访问助手的安装---破解谷歌访问助手
13,642 阅读
2
安装postcss-px-to-viewport,将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件(有更新postcss弃用,附带vite.config.ts文件)
3,211 阅读
3
编译asar文件与electron反编译
3,178 阅读
4
websocket封装带心跳和重连机制(vue3+ts+vite)
2,782 阅读
5
js一些小功能(持续更新)
2,442 阅读
大前端
JavaScript
CSS
HTML
框架
Vue
electron
element-ui/plus
小程序
微信小程序
uni-app
服务端
Node.js
nginx
PHP
MySQL
工具
杂记
登录
Search
标签搜索
Vue3
Vue
Axios
微信小程序
Javascript
Vuex
js
请求
request
前端
tampermonkey
Google
助手
脚本
小程序云开发
Bootstrap
壁纸
鼠标事件
跨域
css
大祥子i
累计撰写
55
篇文章
累计收到
128
条评论
首页
栏目
大前端
JavaScript
CSS
HTML
框架
Vue
electron
element-ui/plus
小程序
微信小程序
uni-app
服务端
Node.js
nginx
PHP
MySQL
工具
杂记
页面
壁纸
直播
留言
关于
友链
统计
搜索到
3
篇与
CSS
的结果
2021-10-30
安装postcss-px-to-viewport,将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件(有更新postcss弃用,附带vite.config.ts文件)
2022年6月6日vite编译显示插件弃用postcss-px-to-viewport: postcss.plugin was deprecated. Migration guide: https://evilmartians.com/chronicles/postcss-8-plugin-migration解决方式:1、安装新的postcss-px-to-viewport-8-pluginnpm install postcss-px-to-viewport-8-plugin --save-dev 其他配置如下 也可以新建: module.exports = { plugins: { 'postcss-px-to-viewport-8-plugin': { unitToConvert: 'px', // 需要转换的单位,默认为"px" viewportWidth: 750, // 设计稿的视口宽度 unitPrecision: 5, // 单位转换后保留的精度 propList: ['*','!font-size'], // 能转化为vw的属性列表,!font-size表示font-size后面的单位不会被转换 viewportUnit: 'vw', // 希望使用的视口单位 fontViewportUnit: 'vw', // 字体使用的视口单位 // 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。 // 下面配置表示类名中含有'keep-px'都不会被转换 selectorBlackList: ['keep-px'], minPixelValue: 1, // 设置最小的转换数值,如果为1的话,只有大于1的值会被转换 mediaQuery: false, // 媒体查询里的单位是否需要转换单位 replace: true, // 是否直接更换属性值,而不添加备用属性 exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件 include: [/src/], // 如果设置了include,那将只有匹配到的文件才会被转换 landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape) landscapeUnit: 'vw', // 横屏时使用的单位 landscapeWidth: 1338, // 横屏时使用的视口宽度 }, }, }; {mtitle title="vite.config.js文件配置"/}import { defineConfig, loadEnv } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' import postcsspxtoviewport8plugin from 'postcss-px-to-viewport-8-plugin'; const resolve = str => path.resolve(__dirname, str) export default defineConfig(({ mode }) => { const ENV = loadEnv(mode, __dirname) const IS_DEV = ENV.VITE_APP_ENV !== 'production' return { base: './', resolve: { alias: { '@': resolve('src'), '@components': resolve('src/components'), '@utils': resolve('src/utils'), '@views': resolve('src/views'), '@assets': resolve('src/assets') }, extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue'] }, build: { // 公共路径(必须有的,不然打包css和js路径问题不加载) publicPath: './', // 打包构建输出路径 outDir: 'dist', // 生成静态资源的存放路径 assetsDir: 'static', // 构建后是否生成 source map 文件 sourcemap: IS_DEV, // chunk 大小警告的限制 chunkSizeWarningLimit: 700, // 生产环境移除 console minify: 'terser', terserOptions: { compress: { drop_console: !IS_DEV, drop_debugger: !IS_DEV } }, rollupOptions: { output: { manualChunks: { vlib: ['vue', 'vue-router', 'vuex'] } } } }, server: { port: 8088, open: true, proxy: { '/api': 'http://127.0.0.1:3000' }, cors: true }, css: { // 处理打包出现警告 "@charset" must be the first postcss: { plugins: [ /* require('postcss-px-to-viewport-8-plugin')({ * 2022年8月17日更新,使用require('postcss-px-to-viewport-8-plugin')引入 * vite报错:error when starting dev server:Error: * Dynamic require of "postcss-px-to-viewport-8-plugin" is not supported * 故此改为postcsspxtoviewport8plugin({ */ postcsspxtoviewport8plugin({ unitToConvert: 'px', // 需要转换的单位,默认为"px" viewportWidth: 1920, // 视窗的宽度,对应pc设计稿的宽度,一般是1920 // viewportHeight: 1080,// 视窗的高度,对应的是我们设计稿的高度 unitPrecision: 6, // 单位转换后保留的精度 propList: [ // 能转化为vw的属性列表 '*' ], viewportUnit: 'vw', // 希望使用的视口单位 fontViewportUnit: 'vw', // 字体使用的视口单位 selectorBlackList: ['el-switch', 'is-checked'], // 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。cretae minPixelValue: 1, // 设置最小的转换数值,如果为1的话,只有大于1的值会被转换 mediaQuery: false, // 媒体查询里的单位是否需要转换单位 replace: true, // 是否直接更换属性值,而不添加备用属性 exclude: /(\/|\\)(node_modules)(\/|\\)/ // 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件 }), { postcssPlugin: 'internal:charset-removal', AtRule: { charset: atRule => { if (atRule.name === 'charset') { atRule.remove() } } } } ] } }, plugins: [ vue() ], } }) {mtitle title="postcss-px-to-viewport配置"/}安装postcss-px-to-viewport,将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 [PostCSS](https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fpostcss%2Fpostcss) 插件. npm install postcss-px-to-viewport --save-dev 相应配置参数 { unitToConvert: "px", // 默认值`px`,需要转换的单位 viewportWidth: 375, // 视窗的宽度,对应设计稿宽度 viewportHeight: 667, // 视窗的高度, 根据375设备的宽度来指定,一般是667,也可不配置 unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数 propList: ["*"], // 转化为vw的属性列表 viewportUnit: "vw", // 指定需要转换成视窗单位 fontViewportUnit: "vw", // 字体使用的视窗单位 selectorBlaskList: [".ignore-"], // 指定不需要转换为视窗单位的类 mediaQuery: false, // 允许在媒体查询中转换`px` minPixelValue: 1, // 小于或等于`1px`时不转换为视窗单位 replace: true, // 是否直接更换属性值而不添加备用属性 exclude: [], // 忽略某些文件夹下的文件或特定文件 landscape: false, // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape) landscapeUnit: "vw", // 横屏时使用的单位 landscapeWidth: 1134 // 横屏时使用的视窗宽度 } unitToConvert: "px", // 默认值`px`,需要转换的单位 viewportWidth: 375, // 视窗的宽度,对应设计稿宽度 viewportHeight: 667, // 视窗的高度, 根据375设备的宽度来指定,一般是667,也可不配置 unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数 propList: ["*"], // 转化为vw的属性列表 viewportUnit: "vw", // 指定需要转换成视窗单位 fontViewportUnit: "vw", // 字体使用的视窗单位 selectorBlaskList: [".ignore-"], // 指定不需要转换为视窗单位的类 mediaQuery: false, // 允许在媒体查询中转换`px` minPixelValue: 1, // 小于或等于`1px`时不转换为视窗单位 replace: true, // 是否直接更换属性值而不添加备用属性 exclude: [], // 忽略某些文件夹下的文件或特定文件 landscape: false, // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape) landscapeUnit: "vw", // 横屏时使用的单位 landscapeWidth: 1134 // 横屏时使用的视窗宽度
2021年10月30日
3,211 阅读
0 评论
430 点赞
2021-05-20
Bootstrap4在线简历
B站上做的Bootstrap4在线简历教程的源码{bilibili bvid="BV1PZ4y1F7fB"/}下载源码Bootstrap4在线简历.zip
2021年05月20日
406 阅读
2 评论
2 点赞
2021-05-16
纯CSS实现类似于唱片的效果
纯CSS实现类似于唱片的效果,css3实现抖音音乐唱片效果,带旋转!
2021年05月16日
1,120 阅读
1 评论
4 点赞