CSS更改图像以在缩放时堆叠答案

【问题标题】：CSS Change Images to be stacked on zoomCSS更改图像以在缩放时堆叠
【发布时间】：2019-09-18 12:20:12
【问题描述】：

我有一个包含两张图片的菜单页面。基本上我希望图像在网络浏览器上并排显示（居中在一行中），并且在移动视图中我希望它们彼此重叠出现（在居中的列中）。当图像在移动视图中并排时，它们太小而无法单击。

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

<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>

在移动设备上查看时，这些图像仍然像在网络浏览器中一样并排显示。我不确定在移动视图中将它们堆叠起来的最佳方法是什么。我一直在尝试一些事情，但无法让它发挥作用。

【问题讨论】：

您正在使用一个行类，这就是为什么它们在桌面和移动设备上都出现在一行中。给 div 一个 id 并自定义 css 以便内部 div 显示 inline-block。（并摆脱内联样式！）
谢谢瑞秋，这个解决方案奏效了！此外，愚蠢地意识到我的预想尝试修复它不起作用，因为我忘记在浏览器上禁用 Cashe...啊
耶！该死的那些有问题的缓存......是的，内联块对于移动网站来说绝对方便

标签： html css mobile responsive-design html-framework-7

【解决方案1】：

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

您可以通过检查“userAgent”来检查加载设备是否为移动设备。更多详情How to detect a mobile device with JavaScript?

然后您可以按以下格式指定仅限移动设备的课程。例如：

.mobile .container {
   color: red;
}

【讨论】：