84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
类似这种 我现在想要做一个component 有背景图 但是背景图不能百分百大小 然后中间还要有内容 左边图片 右边文字 如何来做响应式
走同样的路，发现不同的人生
试试 background-size: cover;
background-size: cover;
background-position，和background-size配合使用，试过没
你可以仔细研究下 Apple 的一些页面，它的一些页面就是使用了背景图片且自适应的 —— 当然，它的布局也相对简单。它的原理是就是 CSS3 Media Query。
我平时会用到 2 种方案：
12 列栅格布局系统（宽度、浮动、顺序响应）；
Media Query 适配（使用 position 属性或 flex 布局、字号、适配的省流图片）；
position
flex
如果是组件开发的话，你仍可以使用 props 来定义好行内参数，然后 component 内部判断排版样式（预设几种版式）；
props
对于背景图片，你可以使用 background-size 或 background-position: center center 属性来实现图片自适应显示（自动填充），也可以使用 Media Query 指定不同的设备上显示的不同（如：desktop 图片宽大于高、mobile 竖屏图片高大于宽）图片（节省流量）。
background-size
background-position: center center
我觉得：尽量不要用背景来作为内容版式的一部分，除非设计师给你提供了足够的图片适配尺寸和方案！
试试
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 竖屏图片高大于宽）图片（节省流量）。我觉得：尽量不要用背景来作为内容版式的一部分，除非设计师给你提供了足够的图片适配尺寸和方案！