css – So schreiben Sie ein responsives Layout mit Hintergrundbildern
怪我咯2017-07-06 10:37:20
0
3
2034
Ä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
对于背景图片，你可以使用background-size或background-position: center center属性来实现图片自适应显示（自动填充），也可以使用 Media Query 指定不同的设备上显示的不同（如：desktop 图片宽大于高、mobile 竖屏图片高大于宽）图片（节省流量）。
试试
background-size: cover;background-position，和background-size配合使用，试过没
你可以仔细研究下 Apple 的一些页面，它的一些页面就是使用了背景图片且自适应的 —— 当然，它的布局也相对简单。它的原理是就是CSS3 Media Query。
我平时会用到 2 种方案：
12 列栅格布局系统（宽度、浮动、顺序响应）；
Media Query 适配（使用
position属性或flex布局、字号、适配的省流图片）；如果是组件开发的话，你仍可以使用
props来定义好行内参数，然后 component 内部判断排版样式（预设几种版式）；对于背景图片，你可以使用
background-size或background-position: center center属性来实现图片自适应显示（自动填充），也可以使用 Media Query 指定不同的设备上显示的不同（如：desktop 图片宽大于高、mobile 竖屏图片高大于宽）图片（节省流量）。我觉得：尽量不要用背景来作为内容版式的一部分，除非设计师给你提供了足够的图片适配尺寸和方案！