文章/答案/技术大牛

发布

问屏幕尺寸的Roundcube条件
EN

Stack Overflow用户

提问于 2019-02-08 22:32:10

回答 1查看 98关注 0票数 0

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

我正在使用Roundcube构建一个web邮件应用程序。Roundcube有自定义的XHTML标签，可以和普通的HTML一起用来显示东西。这些XHTML-tag可以有一个属性"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，如果用户在移动设备或平板电脑上，而不是在桌面上，或者相反的情况。

我以任何方式都找不到这个。有没有人知道如何做到这一点？

roundcube

responsive-design

xhtml

conditional-statements

viewport

回答 1

Stack Overflow用户

发布于 2019-02-10 02:28:08

我不是Roundcube的goto用户，所以也许其他人可以帮你找到一个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>

希望这能有所帮助！

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54594578

复制

相似问题

问屏幕尺寸的Roundcube条件
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问屏幕尺寸的Roundcube条件EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问屏幕尺寸的Roundcube条件
EN