CSS：使图像下方的文字具有响应性

Question

所以我有以下情况：

如果是所有图像，我可以通过更改不同视口上的宽度百分比轻松地使它们响应，但是这里的问题是图像下面的图像具有变化的文本，因此当您减小宽度时，文本会将项目推到其下方。

有没有一种方法可以使这种情况做出响应？

Answer 1

这是“响应式布局”示例，根据屏幕分辨率，此布局将适合它。

进行响应式布局时，只需记住每个值都应以%并且使用@media查询可以使布局适合从移动设备到平板电脑设备。

例如，检查此CSS代码。

ul, p{margin:0; padding:0;}
#gallery li {float:left;list-style-type:none; 
  padding:2px; min-width:22%;max-width:100%;width:22%}
#gallery li img{display:block;width:100%;height:100%;}
p{border:1px solid #000;width:100%;height:100%;}

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
 {
   ul#gallery{width:100%}
 }
 ul, p{margin:0; padding:0;}
  #gallery li{width:100%;display:block;float:left;}
}

在此处查看演示。 http://jsbin.com/divuvehe/1/edit