是否还在为rem适配感到烦恼？和我一样，不想去考虑单位的大小?这是除rem单位以外的另一种数据大屏适配方案。用最少的工作量，最简单的方法解决问题。可作于学习，可用于工作。

阅前必看：本文总结了各种常见的布局实现,每个方法的优缺点分析往后在github上陆续补充。还有就是这篇文章没提到的其他布局，待本人后续想到或遇到定会在github上及时更新。 由于文章篇幅较长,排版有些混乱,希望别介意哈。掘金PC端是会自动生成目录的,为了方便移动端阅读，还特意…

寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS 中并不存…

实现定高、不定高的瀑布流虚拟列表组件，分享实现过程和思路，实现小红书首页的瀑布流虚拟列表效果并进行计算加载优化。

瀑布流， 又称瀑布流式布局，是比较流行的一种网站页面布局。视觉表现为宽度相等高度不定的元素组成的参差不齐的多栏布局，随着页面向下滚动，新的元素附加到最短的一列而不断向下加载。 ​瀑布流本质上就是寻找各列之中高度最小的一列，并将新的元素添加到该列后面，只要有新的元素需要排列，就…

经常在Codepen上看到大侠们用SVG画出不可思议的动画，我一直很好奇他们是怎么运作的，总觉得这需要对SVG有足够透彻的了解，并且自己画出那些SVG图案，才有办法让他动起来。 既然自己画不出来，那我们就去找现成的库，svg库有很多，如Flaticon、iconfont、Ico…

本文github地址,持续更新...... 覆盖一层蒙版，并在蒙版上书写文字。需要2层，从低到上为图片层、蒙版层(上面可写字) 毛玻璃蒙版，本质上讲是两层图，底层图清晰完整，顶层图模糊残缺，并且两者位移完全一致，因此叠加到一起后像是一张图。为了确保位移一致，我们用了 backg…

1. 前言 grid 布局是 css 中的一种新的布局方式，对盒子和盒子内容的位置及尺寸有很强的控制能力。与 flex 不同，flex 着重于单轴，而 grid 适应于多轴，下面就来做个简单的介绍。 2. 基本概念 设置 display: grid; 的元素称为容器，它的直接子…

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。 Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可…