请问前端那种可视化大屏该如何用 CSS 布局

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 1640 天前的主题，其中的信息可能已经有所发展或是发生改变。

类似淘宝那种页面都是固定一个最小宽度，然后两边留白。如果要完美做到横向纵向铺满整个屏幕且无滚动条，该利用哪些 css 属性来布局。

想到一种极端办法，所有元素尺寸都是百分数，但是字体和边距该怎么办

CSS

边距

布局

字体

6 条回复 • 2020-05-27 21:22:52 +08:00

liyang5945

2020-05-27 14:36:17 +08:00

rem 可破，其实就是百分比

clown007

2020-05-27 17:55:58 +08:00

用背景图片
body {
background-image: url('xxx');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}

remon

2020-05-27 18:09:07 +08:00 via Android

2020 年了，vw, vh

dioxide

2020-05-27 21:14:32 +08:00

补充下: css grid 对此场景挺有用的

ArtIsPatrick

2020-05-27 21:15:52 +08:00 via iPhone

字体也百分比呗

YadongZhang

2020-05-27 21:22:52 +08:00

postcss-px-to-viewport