H5移动端开发中实现0.5px的细线
在H5移动端开发中实现0.5px的细线是一个非常经典的问题。这背后的根本原因在于设备的物理像素和CSS的逻辑像素之间的关系，也就是设备像素比（Device Pixel Ratio, DPR）。 例如，在DPR为2的Retina屏幕上，1个C…
1645 字6 分钟
前端开发 / cssObsidian
载入中...
载入中...
该分类下共收录了 6 篇文章
在H5移动端开发中实现0.5px的细线是一个非常经典的问题。这背后的根本原因在于设备的物理像素和CSS的逻辑像素之间的关系，也就是设备像素比（Device Pixel Ratio, DPR）。 例如，在DPR为2的Retina屏幕上，1个C…
将SVG插入网页并根据样式主题（例如浅色/深色模式）自动改变其颜色，核心在于让SVG的颜色不由其自身写死的属性决定，而是由外部的CSS来控制。 将SVG视为DOM的一部分，而不是一张独立的图片，是解决这个问题的关键。 以下是几种主流且高效的…
要设计出漂亮的UI界面，我们不能仅仅停留在“感觉”上，而是要理解其背后的设计原则，并掌握将这些原则转化为代码的技巧。这更像是一门应用心理学和工程学的交叉学科，而非纯粹的艺术创作。 我将遵循第一性原理，从最底层的视觉构建模块开始，逐步深入到实…
我们来深入且系统地讲明白 CSS 动画。我会从其本质出发，剖析两大核心机制，探讨性能优化，并最终总结出主流的实战用法。 本质隐式动画，定义了 从状态 A 到状态 B 的转变过程。显式动画，定义了 一个或多个关键帧（Keyframes） 的完…
我们来彻底拆解一下 CSS 的十六进制（Hex）颜色码，并提供一套让你能快速上手、微调并应用于实践的设计方法。 第一部分：彻底搞懂 RRGGBB 编码 从第一性原理出发，屏幕上所有颜色的本质是光的三原色混合，即 Red（红）、Green（…
为什么要初始化 CSS 样式? 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。 当然，初始化样式会对 SEO 有一定的影响，但鱼和熊掌不可兼得，但力求影响最…