Question

在研究后希望为iBooks桌面应用程序设置ePub的样式，但我还没有找到实现此目的的方法，并且我进行了评论：

但是我找不到答案。目前，我无法在 iBooks 台式机应用程序中将报价left或right浮动到100%到<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> （我的设备样式没有问题。）

我使用Bacon Ipsum用以下HTML生成了一个虚拟ePub：

.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;
}

这是引号的默认CSS：

@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[__ibooks_internal_max_width*="500px"] {
    .quoteLeft, .quoteRight {
        // code
    }
}

向厨房水槽扔水，以查看我是否可以针对根：

mask

是否存在可以在 iBooks 台式机应用程序中使用的媒体查询？

iBooks桌面应用程序是否有特定的@media？

媒体查询测试：

0 个答案: