台式机：水平 picture/content，智能手机：垂直 picture/content

Question

我正在使用 Wordpress 响应式就绪主题，除了表格或 div 容器外，它工作得很好。

我遇到的主要问题是我的表格，如下所示：lichtundmusik.ch/vermietung/licht

我想要的：当我在智能手机上观看与上述相同的页面时，图片应自动将文本和图片的顺序从水平更改为垂直

还有一个难度：今天是我第一次遇到十字Bootstrap，我试图实现它，但不幸的是在网站header中输入Bootstrap代码正在改变整个网站。

有人为我提供解决方案吗？感谢您的回答

Answer 1

由于您的输出是 table，因此您将不得不对 CSS 施展一些技巧才能完成这项工作。 CSS-Tricks has a nice article explaining the basics。 TL;DR，您需要为 css 中的小屏幕创建另一个媒体查询，将 table 单元格转换为块元素：

@media only screen and (max-width: 760px)  {
    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr { 
        display: block; 
    }
}

对于第二部分，Bootstrap 是一个巨大的框架，将改变一切。对于我需要响应而不是体积庞大的项目，我一直在使用 Pure CSS，它在一个 4.4KB 的包中提供了很多响应的好东西。

台式机：水平 picture/content，智能手机：垂直 picture/content

Desktop: Horizontal picture/content, SmartPhone: Vertical picture/content

html

css

wordpress

smartphone