CSS
5篇文章 · 0订阅
  • Facebook 重构：抛弃 Sass / Less ，迎接原子化 CSS 时代
    随着 Facebook 和 Twitter 最近的产品部署，我认为一个新的趋势正在缓慢增长:Atomic CSS-in-JS。 在这篇文章中，我们将看到什么是Atomic CSS（原子 CSS），它如何与 Tailwind CSS 这种实用工具优先的样式库联系起来，目前很多大公…
    JavaScript 前端
    Facebook 重构：抛弃 Sass / Less ，迎接原子化 CSS 时代
  • 总结5种自适应方式
    在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端较为复杂，它涉及到三个视口：分别是 Layout Viewport（布局视口）、 Visual Viewport（视觉视口）、Ideal Viewport。 而视口单位中的“视口”，在桌面端，毫无疑问指的就是浏览器…
    前端
  • 自适应布局方案
    rem（font size of the root element）是指相对于根元素<html>来做计算的字体大小单位。 e.g. 设置html { font-size: 75px }时，其他元素1rem = 75px，4rem = 300px vw是基于viewpo…
    CSS
    自适应布局方案
  • 两列自适应布局方案整理
    本文讨论的是两列自适应布局：左列定宽/不定宽，右列自适应。 虽然分这两种情况，但实际上不定宽的方案同样适用于定宽的场景，因此不定宽的方案泛用度更高。 再者，这个方案由于.right-fix的margin-left和.left的width高度耦合，因此无法实现自适应，只能应用在左…
    前端 CSS
  • CSS 属性篇(五)：box-sizing属性
    在CSS中，你设置一个元素的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距…
    CSS