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.