Состояние круглого куба по размеру экрана - PullRequest
Новая
       46

Состояние круглого куба по размеру экрана

0 голосов
/ 08 февраля 2019

Я спрашиваю об этом, потому что я нигде не смог найти ответ.

Я использую Roundcube для создания приложения веб-почты.В 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, если пользователь находится на мобильном телефоне или планшете, но не на рабочем столе, или наоборот.

Я не смог найти это каким-либо образом.Есть кто-то, кто знает, что это может быть достигнуто?

1 Ответ

0 голосов
/ 09 февраля 2019

Я не фанат 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>

Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...