在css媒体查询中将照片和内容堆叠在一起

在CSS媒体查询中，将照片和内容堆叠在一起可以通过使用flexbox布局和媒体查询结合的方式来实现。下面是一个完善且全面的答案：

媒体查询（Media Queries）是CSS3的一个重要特性，它允许我们根据设备的不同特性来应用不同的样式，以适应不同的屏幕尺寸和设备类型。将照片和内容堆叠在一起可以通过设置元素的显示方式和调整元素的排列顺序来实现。

首先，我们可以使用flexbox布局来实现照片和内容的堆叠。Flexbox是一种弹性盒子布局模型，它可以让我们更轻松地进行元素的布局和对齐。

下面是一个示例代码：

<div class="container">
  <div class="photo">
    <img src="photo.jpg" alt="照片">
  </div>
  <div class="content">
    <h1>内容标题</h1>
    <p>这是一段内容文本。</p>
  </div>
</div>

.container {
  display: flex;
  flex-direction: column;
}

.photo {
  order: 2; /* 调整元素的排列顺序，使照片在内容下方 */
}

@media screen and (max-width: 768px) {
  .container {
    flex-direction: row; /* 在小屏幕上改为水平排列 */
  }
  
  .photo {
    order: 1; /* 调整元素的排列顺序，使照片在内容左侧 */
  }
  
  .content {
    margin-left: 20px; /* 添加间距，使内容与照片有一定的间隔 */
  }
}

在上面的代码中，我们使用了display: flex;将容器设置为flex容器，使其内部元素可以进行弹性布局。flex-direction: column;将元素垂直排列，将照片和内容堆叠在一起。

然后，我们使用媒体查询@media screen and (max-width: 768px)来判断屏幕宽度是否小于等于768px，如果是，则将容器设置为水平排列，并调整照片和内容的排列顺序。

这样，在大屏幕上，照片会在内容下方堆叠显示，而在小屏幕上，照片会在内容左侧堆叠显示，并且添加了一定的间距，使内容与照片有一定的间隔。

推荐的腾讯云相关产品和产品介绍链接地址：

• 腾讯云弹性容器实例：腾讯云弹性容器实例（Elastic Container Instance，ECI）是一种基于容器技术的高性能、高可扩展性的容器实例服务，能够提供快速的应用部署和弹性的扩缩容能力。
• 腾讯云弹性伸缩：腾讯云弹性伸缩（Auto Scaling，AS）是一种根据业务需求自动调整云服务器实例数量的服务，实现按需弹性伸缩，提升业务灵活性和可用性。

以上就是将照片和内容堆叠在一起的CSS媒体查询方法以及推荐的腾讯云相关产品。希望对您有帮助！