CSS-编程技巧
![](/img/icons/default_cover.jpg)
CSS-编程技巧
吴华锦自动分配宽高
1 | justify-content: space-between; |
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.
平行四边形
评论
匿名评论隐私政策