CSS长度单位px、rem、em、vh、vw以及DIP、DPI 、 PPIpx是相对于显示设备（如电脑显示器、手机屏幕等）上的物理像素的单位，也就是屏幕上的一个物理像素点 一个 px

背景： 之前在做需求的时候，产品有提到一个bug，说是在某些情况下不应该触发外部滚动条滚动，例如鼠标在气泡框的内部就不能产生外部滚动条滚动，这样会影响用户的体验 原效果： 禁止滚动穿透之后效果： 可以

✅ 如何从设计稿快速获取样式？ ✅ 如何将 px 自动转成 rem 实现响应式适配？ 一、前端接到设计稿后第一反应？ 没错，前端最常遇到的第一关卡，就是 设计稿尺寸 → 实际设备适配

Stylus：让CSS更高效的预处理器革命 在前端开发中，CSS是页面样式的基石，但原生CSS的局限性（如缺乏变量、嵌套、函数等）常让开发者陷入重复编码的困境。这时，CSS预处理器应运而生——而Sty

随着移动设备的普及，H5页面已成为企业展示内容和提供服务的重要平台。然而，不同设备的屏幕尺寸、分辨率和浏览器差异，使得H5页面的适配成为开发者面临的一大挑战。本文将深入探讨H5适配方案的必要性、常见方

什么是响应式布局？ 响应式布局指的是同一页面在不同屏幕尺寸下展示不同的页面布局。从这句话可以看出我们如果想要达到这样的目的，那么就必须要能够检测/感知页面屏幕尺寸的变化，在不同的尺寸下修改对应的CSS

vw 和 rem 是两个神奇的 CSS 长度单位，认识它们之前，我一度认为招聘广告上的“像素级还原”是一种超能力，我想具备这种能力的人，一定专业过硬、有一双高分辨率。

前言 该案例主要用到了css的新特性 @property来实现交互流光效果 @property是CSS Houdini API的一部分，通过它，开发者可以在样式表中直接注册自定义属性

谷歌官网贴心地列举了 CSS 2023 的诸多年度重量级更新，我会科普一下 3 个个人觉得牛逼闪闪的 CSS 新功能。