CSS-编程技巧

自动分配宽高

1
2
3
justify-content: space-between;
display: grid;
grid-template-columns: repeat(auto-fill, 96px);

CSS-编程技巧

  • 使用百分比而不是固定的宽度。或者使用相对的宽度：vw, vh, vmin, vmax
  • 在大屏幕上要有一个固定宽度的元素时，使用 max-width，让其不用media query就能自适应小屏幕
  • 在 img, object, video, iframe 加上 max-width: 100%
  • 当需要填充元素的背景图片时，使用 background-size: cover 让图片能保持原始比例。在移动设备上使用高解析图片不是明智的做法
  • 制作 grid 页面时让 viewport width 来决定每一列的数量。Flexbox 或者 display: inline-block 就可以做到
  • 当制作多栏的的文字区块时，设定 column-width 而不是 column-count，让你在小屏幕上会得到一个栏位

减少重复代码原则：

半透明的边界

See the Pen Secret 1: 半透明的边界 by whjin (@whjin) on CodePen.

内部圆角

See the Pen 内部圆角 by whjin (@whjin) on CodePen.

背景图案

See the Pen 背景图案 by whjin (@whjin) on CodePen.

（伪）随机背景图案

See the Pen （伪）随机背景图案 by whjin (@whjin) on CodePen.

不间断的图片边界

See the Pen 不间断的图片边界 by whjin (@whjin) on CodePen.

灵活的椭圆形

See the Pen 灵活的椭圆形 by whjin (@whjin) on CodePen.

平行四边形

See the Pen 平行四边形 by whjin (@whjin) on CodePen.