在移动设备上将两个图像彼此对齐

Question

我有一个页面，其中包含2个彼此相邻的响应图像（当调整浏览器大小时，它们会在保持宽高比的同时自动更改其大小），非常适合台式机。但是，我希望它们在手机上彼此自动对齐：一个图像应位于顶部，而另一图像应移至其下方。

我该怎么做？感谢您的帮助。

这是我的代码：

                x       x      y      y
                a       b      a      b                                     
  20190416   197525 19150   1090625 373125

Answer 1

您可以使用@media rule来检测屏幕尺寸和手机所需的代码

例如：

@media only screen and (max-width: 768px) {
    .container { 
        display:flex;
        flex-direction: column;
    }
}