Есть ли конкретное @media для приложения iBooks для настольных ПК? - PullRequest
Новая
       71

Есть ли конкретное @media для приложения iBooks для настольных ПК?

0 голосов
/ 17 октября 2018

Глядя на стиль ePub для настольного приложения iBooks, я не нашел способа сделать это, и я рассмотрел:

, но я не могунайти ответ.В настоящее время я не могу получить цитату, которая обычно всплывает left или right до 100% в iBooks Desktop Приложение ( У меня нет проблемв стиле для устройств ).

Использование Bacon Ipsum Я создал фиктивный ePub со следующим HTML: 

<div class="quoteLeft">
    <p class="quote">Bacon ipsum dolor amet pork chop pastrami salami ball tip pork loin jowl.</p>
</div>
<p class="indent">Shankle ham strip steak meatloaf ball tip. Turkey boudin pork loin ribeye brisket kevin landjaeger meatloaf, shank kielbasa salami porchetta pork chop. Biltong doner picanha turkey pork loin. Drumstick tri-tip filet mignon turkey kevin salami. Pork chop landjaeger shank, sausage venison alcatra hamburger shoulder pig. Venison porchetta buffalo, tail picanha hamburger short loin drumstick turkey jowl boudin turducken pork beef ribs pork loin. Turkey tongue boudin, cupim strip steak pork belly kevin ham hock jowl chicken brisket ball tip pig.</p>
<p class="body">Kielbasa pastrami jerky landjaeger shankle. Prosciutto jerky shank bacon tri-tip chicken. Pig salami cow alcatra meatball. Flank bresaola short ribs shoulder, salami andouille jowl ground round tri-tip chuck pork drumstick jerky sausage doner. Sirloin pancetta ham hock pork loin, filet mignon bresaola buffalo. Frankfurter pork loin tail kielbasa turkey, short ribs ham hock shankle brisket bresaola sausage leberkas drumstick tenderloin sirloin.</p>
<div class="quoteRight">
    <p class="quote">Shankle leberkas meatball porchetta brisket, shoulder andouille sausage.</p>
</div>

Вот CSS по умолчаниюдля кавычек: 

.quoteLeft {
    float:left;
    width:35%;
    margin:1em 1em 1em 0.15em;
    padding:0.50em;
    border:1px solid #aeaeae;
    page-break-inside:avoid !important;
    color:green;
}
.quoteRight {
    float:right;
    width:35%;
    margin:1em 0.15em 1em 1em;
    padding:0.50em;
    border:1px solid #aeaeae;
    page-break-inside:avoid !important;
    color:green;
}
.quote {
    font-family:sans-serif;
    font-size:1.15em;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    line-height:1.6;
    text-decoration:none;
    text-transform:none;
    text-align:center;
}

Тестирование медиазапроса:

Только экран с максимальной шириной: 

@media only screen and (max-width:400px) {
    .quoteLeft, .quoteRight {
        float:none;
        clear:both;
        width:92%;
        margin:1em 2% !important;
        color:red;
        background-color:lightgrey;
    }
}

Макс. ширина: 

@media (max-width:300px) {
    .quoteLeft, .quoteRight {
        // code
    }
}

Только экран и мин. И макс. Для устройства: 

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .quoteLeft, .quoteRight {
        // code
    }
}

Бросив в него кухонную раковину, пытаясь понять, могу ли я нацелитьсяroot: 

:root[__ibooks_internal_max_width*="500px"] {
    .quoteLeft, .quoteRight {
        // code
    }
}

Существует ли медиа-запрос, который будет работать в iBooks Desktop Приложения ?

...