CSS 更改要缩放堆叠的图像

Question

我有一个包含两张图片的菜单页面。基本上，我希望图像在Web浏览器上并排显示(居中为一行(，而在移动视图中，我希望它们彼此重叠(在居中的列中(。与移动视图中并排图像一样，它们太小而无法单击。

我一直在使用 framework7 样式表行和列类将图像并排放置在 Web 浏览器上。

<div class="row">
    <div class="col-50">
       <a href="page1.html"><img src="css/images/image1.png" height="50%" width="50%"></a>
    </div>
    <div class="col-50">
        <a href="page2.html"><img src="css/images/image2.png" height="50%" width="50%"></a>
    </div>
</div>

在移动视图中，这些图像仍然并排显示，就像它们在 Web 浏览器中一样。我不确定在移动视图中将它们堆叠的最佳方法是什么。我一直在尝试一些事情，但无法让它工作。

Answer 1

您可以创建分别影响 Web 和移动设备的 css 类。这将能够更灵活地组织您的移动视图。一种方法是在初始化应用程序检查网站加载到移动设备上时.html将类名"mobile"添加到您的 framework7 索引中。

您可以通过选中"userAgent"来检查加载设备是否为移动设备。有关更多详细信息，如何使用JavaScript检测移动设备？

然后，您可以按以下格式指定仅限移动设备的类。 前任：

.mobile .container {
   color: red;
}