全部文章

你知道移动端适配吗

自适应：根据不同的设备屏幕大小来自动调整尺寸、大小 响应式：会随着屏幕的实时变动而自动调整，是一种更强的自适应 目前市面上移动端屏幕尺寸非常的繁多，很多时候我们希望一个元素在不同的屏幕上显示不同的大小以此来更好的还原效果图： 当我们针对一个手机进行布局设计时，设置了一个 200 200 大小的盒子 但在不同的设备上，由于逻辑像素不同的问题，会使得这个盒子在更大的视口上显得很小，在更小的视口上显示很大 因此我们需要进行适配 让它在不同设备...

缩小 macOS 菜单栏各个图标之间的间距

新款的 Macbook 都有刘海，现在有一些软件可以隐藏刘海，但是缩小了一点屏幕的高度，当年苹果说这点高度是他们“送”给用户的。还有一些小工具，可以隐藏部分图标，但是如果要使用隐藏的图标，那就要两步动作。 今天看到一篇 ，可以缩小每个图标之间的间隔，这样就可以显示更多的图标，如果图标非常多，那还是会被刘海挡住的，我们先来看看效果。这是 自带的命令，无需安装第三方工具。 这是缩小图标间距之前，看不到 notion 的图标： 这是缩小图标间...

无限试用GitLens的方案

最近看到GitLens这个插件，试了下，感觉极好。但是付费提示很烦，这极不好。 查了下，看到GitLens是以MIT协议开源的，那么有没有可能无限试用这个插件？ 开干！ 首先clone一下整个项目： 下载node.js（目前项目推荐为node18）并暂时加入PoweShell路径（建议管理员模式执行以防止报错）： 如果你网络不佳，可以： 安装yarn： 切换到先前clone的文件夹，并执行： 我这里报错Sharp这个模块装不上报无法解决...

Git Worktree 的使用

官方介绍地址： 对于 git worktree 的使用场景，我们举个例子说明。 如果我们正在进行重构代码，老板突然要求我们立即修复某些问题。通常我们可能会使用 git stash 来临时存储相关更改，但是此时工作树会处于这样一种混乱状态(有新增的、被移动的、被删除的文件，以及其他的修改)。一个不注意，我们就会打乱 git stash 中的文件，此时我们原本的修改或者 Git 管理有可能就会出现问题。 如果我们希望在不影响现有更改的前提下...

nextjs使用unocss

CSS | 是时候学习 Grid 布局了

在前端开发中，创建灵活且响应式的布局是非常重要的。为了实现这一目标，Grid 网格布局成为了一种强大的工具。它提供了一种直观且灵活的方式来构建网页布局，本文将从Grid的基本概念入手，介绍Grid网格布局中的常用属性和功能。那么下面我们一起来探索这个强大且灵活的布局方式吧！ Flex布局是一维的排版方式，也就是说一次只能控制一个方向（水平方向或者垂直方向），如果需要控制另一个方向需要再添加一层flexbox容器。 Grid布局是二维的排...

requestIdleCallback解决页面卡顿

一、基本概念 1. js是单线程执行的，分为GUI渲染线程，js引擎线程，事件触发线程，定时器触发器线程，http请求线程。 2. 执行js会阻塞gui渲染，如js执行所需时间超过一帧的时间，就会导致页面掉帧，也就是肉眼看到的卡顿。 二、场景模拟 1\. 准备工作 通过一个小方块平移运动模拟浏览器渲染图形 使用while模拟js阻塞 2\. 测试正常运行js耗费时间 可以看到总耗时2s，页面在js运行期间卡住了，小方块完全没有响应，直到...

三年前端还不会配置Nginx？刷完这篇就够了

一口气看完，比自学强十倍！ 什么是Nginx Nginx是一个开源的高性能HTTP和反向代理服务器。它可以用于处理静态资源、负载均衡、反向代理和缓存等任务。Nginx被广泛用于构建高可用性、高性能的Web应用程序和网站。它具有低内存消耗、高并发能力和良好的稳定性，因此在互联网领域非常受欢迎。 为什么使用Nginx 1. 高性能：Nginx采用事件驱动的异步架构，能够处理大量并发连接而不会消耗过多的系统资源。它的处理能力比传统的Web服务...

功能问题：如何限制同一账号只能在一处登录

大家好，我是大澈！ 本文约 字，整篇阅读大约需要 分钟。 感谢关注微信公众号：“程序员大澈”，免费领取" "一份，然后免费加入 ，从此让解决问题的你不再孤单！ 1\. 需求分析 前阵子，和问答群里一个前端朋友，随便唠了唠。期间他问了我一个问题，让我印象深刻。 他问的是，限制同一账号只能在一处设备上登录，是如何实现的？并且，他还把这个功能称为“单点登录”。 我说这不叫“ ”，这是“ ”。 于是，当时对此概念区分不清的他，和我在语言上开始了...