无论是在日常用电脑手机等电子设备，还是做设计、前端开发等工作都需要时刻和像素 / 分辨率打交道，比如在你电脑上运行的占满整个屏幕的项目演示到别人电脑上只显示出一半，别人告诉你说是因为你的电脑屏幕分辨率太大了，你一脸蒙蔽。又比如听别人告诉你说分辨率大小就是你的屏幕大小，你看者你手…

px 是所有开发者接触 css 时所了解的第一个单位，也是开发过程中最常见的单位。 简单来说，像素是一个「相对单位」，不同于厘米这种任意物品都通用的尺寸。像素根据展示媒介的不同而大小不同。 所以 css 里的 1px 就等于屏幕上的 1 像素点吧，太简单了。随便验证一下 下面的…

CSS3的scale等比例缩放 宽度比率 = 当前网页宽度 / 设计稿宽度 高度比率 = 当前网页高度 / 设计稿高度 设计稿： 1920 * 1080 适配屏幕：1920 * 1080 3840 *

最近在工作中做了一些响应式布局的功能和可视化大屏的开发，所以这里我也整理一下用到的响应式布局方案作为未来项目开发的参考方案 常用实现方案 flex 布局 flex 布局一把梭能解决绝大多情况下的响应式

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案！！

今天的文章很有意思，讲一讲整块文本溢出省略打点的一些有意思的细节。 我们都知道，到今天（2020/03/06），CSS 提供了两种方式便于我们进行文本超长的打点省略。 基于上述的超长打点省略方案之下，会有一些变化的需求。譬如，我们有如下结构： 对于上述超出的情况，我们希望对于超…

本文将会和这篇 -- CSS 奇思妙想边框动画类似，讲一些文字效果，利用不同的属性搭配，实现各式各样的文字动效。 在写各种 DEMO 的时候，有的时候一些特殊的字体能更好的体现动画的效果。这里讲一个快速引入不同格式字体的小技巧。 当我们相中了一个我们喜欢的字体，它也提供了非常快…