MicroMatrix

我的博客

前言 在前端开发中,尤其是使用 Vue 或者 React 框架时,我们经常需要新建页面,并且编写一些重复性很高的代码片段。本文将介绍如何利用 VSCode 内置的代码片段功能,快速生成这些重复且繁琐的代码。 VSCode 内置的 snippets VSCode 内置了一些常用语言的 snippets
阅读全文 »

前言 在前端开发中,我们经常会遇到需要动态变化的视觉效果。今天我们将讨论如何利用 CSS 的 mix-blend-mode 属性,实现一个文本穿过特定背景时反色的效果。具体来说,我们会创建一个背景为黑色的 div 元素,并让文本从中穿过。当文本进入 div 的区域时,其颜色会从黑色变为白色,离开时则
阅读全文 »

前言 vite项目可以直接部署到vercel上,不用做任何修改。但是这里会遇到一个问题,就是网站访问接口跨域。如果是普通的服务器,那么通常就是用nginx做反向代理。但是对于Vercel我们无法这么做。 解决方法 采用vercel上的配置做代理。 项目安装插件 pnpm install http-p
阅读全文 »

const 的妙用 在日常开发中,经常能看到这种 const ROLE = {} as const 。 原来使用as const 主要是为了在 TypeScript 中将对象 ROLE 的属性设置为只读。从而增强安全性,此外还能帮助 TS 推到更精确的类型。 同时在使用的过程中使用 ROLE[”xxx”] as readonly 可以防止在代码中意外修改 ROLE 的值。 下面是一个权限判断的例子...
阅读全文 »

前言 盒子模型的理解是前端使用 css 实现准确布局、处理元素排列的关键,下面是对 MDN 上盒子模型文章的一部分难点做见解。 其一就是区块盒子和行内盒子上的行为,其二是 2 种盒子模型的大小问题。 区块盒子和行内盒子 在 CSS 中,有几种类型的盒子,一般分为 区块盒子(block boxes)和 行内盒子(inline boxes)。这里的类型是指盒子在页面流中的行为方式以及与周围盒子元素的关...
阅读全文 »

前言 网站会在 PC 和移动端上浏览,那么各个浏览器和设备的差异性,会使得兼容处理是一件麻烦的事情。尤其是移动端上的那些个异形屏和内容展示的理念。对此我使用的是tailwind css 。今天要分享的是移动端上的屏幕展示问题。 视口单位概述:  vw (视口宽度):视口宽度的 1%。 vh (视口高度):视口高度的 1%。  设置元素的宽度为 100vw,高度为 100vh,该元素将覆盖整个视口。...
阅读全文 »
0%