Heim > Fragen und Antworten > Hauptteil
Ähnlich möchte ich eine Komponente mit einem Hintergrundbild erstellen, aber das Hintergrundbild kann nicht 100 % groß sein. Dann muss sich in der Mitte ein Bild befinden reaktionsschnell
大家讲道理2017-07-06 10:39:20
你可以仔细研究下 Apple 的一些页面,它的一些页面就是使用了背景图片且自适应的 —— 当然,它的布局也相对简单。它的原理是就是 CSS3 Media Query。
我平时会用到 2 种方案:
12 列栅格布局系统(宽度、浮动、顺序响应);
Media Query 适配(使用 position
属性或 flex
布局、字号、适配的省流图片);
如果是组件开发的话,你仍可以使用 props
来定义好行内参数,然后 component 内部判断排版样式(预设几种版式);
对于背景图片,你可以使用 background-size
或 background-position: center center
属性来实现图片自适应显示(自动填充),也可以使用 Media Query 指定不同的设备上显示的不同(如:desktop 图片宽大于高、mobile 竖屏图片高大于宽)图片(节省流量)。
我觉得:尽量不要用背景来作为内容版式的一部分,除非设计师给你提供了足够的图片适配尺寸和方案!