我可以在 Popup Window 中使用 @media 查询和 css 类吗？

Question

我正在此处的 Wordpress 4.1 网站中设置弹出窗口 Window：

您可以在页脚中看到两个选项。 Get the Book link 工作正常，但 CSS 是内联硬编码的，我无法使用 @media 查询将其更改为较小的屏幕。

这里是我使用的代码：

<div style="width: 48%; margin-right: 3.5%; float: left;">
<h3><span style="color: #fb6d03;"><strong>A practical guide to leadership virtually anyone can use.</strong></span></h3>
<span style="color: #000000;">A Journey of Epiphanies: Learning Leadership lays out the path –showing how our progress toward leadership affects us, the people around us, and our future. Then it applies these insights to help identify people that could become great leaders and helps them on their journey.</span>

<a href="http://ajourneyofepiphanies.com/dev/wp-content/uploads/2015/03/a-journey-of-epiphanies-cover.png"><img class="alignnone wp-image-68 size-medium" src="http://ajourneyofepiphanies.com/dev/wp-content/uploads/2015/03/a-journey-of-epiphanies-cover-207x300.png" alt="a-journey-of-epiphanies-cover" width="207" height="300" /></a>

</div>
<div style="width: 48%; margin-right: 0; float: left;">

<a href="http://ajourneyofepiphanies.com/dev/wp-content/uploads/2015/03/amazon.png"><img class="alignnone size-full wp-image-70" src="http://ajourneyofepiphanies.com/dev/wp-content/uploads/2015/03/amazon.png" alt="amazon" width="227" height="46" /></a><a class="buy-book-btn" title="Buy it on Amazon.com">Buy the book! ►</a>

<a href="http://ajourneyofepiphanies.com/dev/wp-content/uploads/2015/03/button-itunes.png"><img class="alignnone size-full wp-image-72" src="http://ajourneyofepiphanies.com/dev/wp-content/uploads/2015/03/button-itunes.png" alt="button-itunes" width="227" height="84" /></a><a class="buy-book-btn" title="Buy it on iTunens">Buy the book! ►</a>

<a href="http://ajourneyofepiphanies.com/dev/wp-content/uploads/2015/03/bnlogo.png"><img class="alignnone size-full wp-image-71" src="http://ajourneyofepiphanies.com/dev/wp-content/uploads/2015/03/bnlogo.png" alt="bnlogo" width="227" height="63" /></a><a class="buy-book-btn" title="Buy it on Barnes &amp; Noble.com">Buy the book! ►</a>

<a href="http://ajourneyofepiphanies.com/dev/wp-content/uploads/2015/03/lulu.png"><img class="alignnone size-full wp-image-69" src="http://ajourneyofepiphanies.com/dev/wp-content/uploads/2015/03/lulu.png" alt="lulu" width="227" height="80" /></a><a class="buy-book-btn" title="Buy it on Lulu.com">Buy the book! ►</a>
</div>

基本上 我想通过使用 CSS 对其应用 @media 查询来动态地将弹出 window 分成两半，但是我设置的 CSS 规则up 好像没影响。

您可以在网站页脚的 "Download the First Chapter" link 中看到一个实例。

这是我的 HTML 代码，使用 CSS 类:

<div class="one-half">
<h3><span style="color: #fb6d03;"><strong>A practical guide to leadership virtually anyone can use.</strong></span></h3>
<span style="color: #000000;">A Journey of Epiphanies: Learning Leadership lays out the path –showing how our progress toward leadership affects us, the people around us, and our future. Then it applies these insights to help identify people that could become great leaders and helps them on their journey.</span>

<a href="http://ajourneyofepiphanies.com/dev/wp-content/uploads/2015/03/a-journey-of-epiphanies-cover.png"><img class="alignnone wp-image-68 size-medium" src="http://ajourneyofepiphanies.com/dev/wp-content/uploads/2015/03/a-journey-of-epiphanies-cover-207x300.png" alt="a-journey-of-epiphanies-cover" width="207" height="300" /></a>

</div>

<div class="one-half last">

Form and Download link will go here but this needs to be the right hand column.

</div>

这里是 CSS 代码：

.one-half {width 48.5%; margin-right:3.5%; float:left;}
.last {margin:0 !important;}
@media all and (max-width: 400px) {
     .one-half {width:100%;}
}

我已经尝试使用插件来响应列等等，但似乎没有什么影响弹出窗口 window。

有什么建议吗？ CSS 在弹出窗口 window 中不起作用吗？我正在使用 Popup Maker 插件。

Answer 1

您可以向 body 元素添加一个 ID，然后在 CSS 中的弹出窗口之前专门针对该 ID 应用到弹出窗口的内容。然后你会得到这样的结果：

HTML

<body class="bunch of classes" id="body-wrap">
    Other markup...
    <div class="popmake" id="popmake"></div>
</body>

CSS

#body-wrap .popmake .one-half {
    width 48.5%; 
    margin-right:3.5%; 
    float:left;
}
#body-wrap .popmake .last {
    margin:0 !important;
}
@media all and (max-width: 400px) {
    #body-wrap .popmake .one-half {
        width:100%;
    }
}

Answer 2

这只是一个简单的缺失冒号。我有

#body-wrap .popmake .one-half {
    width 48.5%; }

需要

#body-wrap .popmake .one-half {
    width: 48.5%; }

我可以在 Popup Window 中使用 @media 查询和 css 类吗？

Can I use @media queries and css classes in a Popup Window?

wordpress

popupwindow

我可以在 Popup Window 中使用 @media 查询和 css 类 吗？

Can I use @media queries and css classes in a Popup Window?

wordpress

popupwindow

我可以在 Popup Window 中使用 @media 查询和 css 类吗？