Sass(Scss)、Less的区别与选择 + 基本使用 为什么要使用 CSS 预处理器 原因 CSS 仅仅是一个标记语言，自定义变量的使用不够灵活。 语法不够强大...

Grid 网格布局，将网页划分为一个个网格，可以任意组合不同的网格，对项目进行不同的排列顺序，flex是一维布局，只能针对项目的轴线设置项目放置的相对位置，而grid布局是将容器划分成行和列

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

😂 尴尬的是本文也并不是陪读系列文章，而是歪马在进行第五章《漂亮的盒子》时，有感而发。 读到书中介绍border-radius的内容时，提到了传说中的九宫格技术，其相关介绍只有可怜的不到一页。九宫格技术所使用的 CSS 属性就是我们今天的主角border-image。虽然这一…

大家好，我是 Steven。 虽然我不打机，但我都知道 赛博朋克 2077 这个游戏，在它的网页上，有一个 Available Now 的按钮，当游标移到它之上的时候，会有一个好像故障的毛刺效果。 这一期，我们就会模仿并且实现这个效果。 打开 CodePen 编辑器 ( htt…

事情是这样的，前两天有学员问我轮播图无缝滚动的原理，说平时用框架习惯了，到自己手撸的时候不会了。 如果是几十张图片，那就直接做成一个3D的圆环，还是那句话，有解决思路最重要。 想看代码的，继续往后看，代码量其实很少，连着css一起也才一百多行而已，所以其实一点都不复杂，重点还是…

类似Tinder和探探的卡片效果的组件，社区中已经非常多了。我这一版除了可以实现和他们一样的效果外。还增加了飞卡的效果，就是类似我的女神邱淑贞这样。 其实我最早实现这个效果，是在2018年的时候，在weex上实现过一版。原帖请看这里：https://zhuanlan.zhihu…

前端开发中还原设计图的重要性毋庸置疑，目前来说应用最多的应该也还是使用rem。然而很多人依然还是处于刀耕火种的时代，要么自己去计算rem值，要么依靠编辑器安装插件转换。 而本文的目标就是通过一系列的配置后，在开发中可以直接使用设计图的尺寸开发，项目为我们自动编译，转换成rem。…

因为在公司，只有一个前端，在做移动端布局的时候。利用px进行布局,发现，需要进行各种手机的适配。 所以在开发第二版的时候，想着引用lib-flexible库(即手淘的方案),询问了上一家公司的同事，会有一些字体和一些诡异的问题。 在无意中，突然一个网友跟我说，他有一个很好用的适…