单位 | 用途 | |
---|---|---|
px | 绝对单位,页面按精确像素展示 | 固定尺寸 |
em | 相对单位,基准点为父节点字体的大小,整个页面内1em不是一个固定的值 | 适配的固定尺寸 |
rem | 相对单位,相对根节点html的字体大小来计算,CSS3新加属性。目前用最多的 | 适配的固定尺寸,移动端更常用 |
vh | 主要用于页面视口大小布局,1vw等于视窗高度的1% | 自适应的非固定尺寸 |
vm | 主要用于页面视口大小布局,1vw等于视窗宽度的1% | 自适应的非固定尺寸 |
% | --- | ------- |
后续补充:flex 布局 Grid 布局
dog | bird | cat |
---|---|---|
foo | foo | foo |
bar | bar | bar |
baz | baz | baz |
还在用浮动?负边距?
你out啦!
现可采取grid和flex相结合的布局方式,,flex布局
flex 1
移动端,,推荐用vw换算px,,手动换算,或者工具批量处理