Question

我之所以这样问，是因为我在任何地方都找不到答案。

我正在使用Roundcube构建Web邮件应用程序。 Roundcube具有可用于显示事物的自定义XHTML标签以及普通的HTML。这些XHTML标记可以具有属性“ condition”，如果我理解正确，则仅在条件满足时才显示该元素。例子：

<roundcube:if condition="var &lt; 0" />
    <div> ... </div>
<roundcube:elseif condition="var &gt; 0" />
    <span> ... </span>
<roundcube:else />
    <p> ... </p>
<roundcube:endif />

<roundcube:container name="container-desktop" id="container-desktop" condition="!myCondition" />
<roundcube:container name="container-mobile" id="container-mobile" condition="myCondition" />

我的问题是我想更改在屏幕/视口宽度上渐显的条件。基本上取决于用户是使用手机，平板电脑还是台式机。我想做的是显示一个div（如果用户使用的是移动设备或平板电脑，而不是台式机），或者相反。

我无法以任何方式找到它。有谁知道这可以实现吗？

Answer 1

我不是Roundcube的追随者，所以也许其他人可以帮助您找到Roundcube @media条件标签。

不过，您是否考虑过使用现成的HTML和CSS解决此问题？

HTML

<div class="container-desktop">
    <!-- desktop content -->
</div>

<div class="container-mobile">
    <!-- mobile content -->
</div>

CSS

<head>
    <meta charset="utf-8">
    <title>...</title>
    <style type="text/css">
        /* mobile first ==> by default show mobile view */
        .container-desktop{display: none;}

        /* show desktop view for viewports above 480px, adjust as required */
        @media only screen and (min-width: 481px){
           .container-desktop{display: block;}
           .container-mobile{display: none;}
        }
    </style>
</head>

希望这会有所帮助！

屏幕尺寸的圆方条件

1 个答案: