Question

检查：http://apkapp.in/software/view/43908225?download=ChatAdda.apk

我想创建一个响应式块，如下所示：

PC查看：

移动视图：

为此，我使用以下CSS和HTML：

    <style>
    @media only screen and (min-width:1220px){ #mobile,.mobile{display:none} } 
    @media only screen and (max-width:1220px){ #pc,.pc{display:none} #mobile,.mobile{display:block} } 
    @media handheld{ #pc,.pc{display:none} #mobile,.mobile{display:block} }
    </style>

    <div class="pc text">
    <table><tr><td><table><tr><td width="100px"><span class="thumb"><img src="http://img.wapkafile.com/software/thumb/43908225/2696215/935beea5c2c820f5a5e54a65cc7fcc52/240.jpg" /></span></td><td width="*"><h2>ChatAdda</h2>
    <ul><li><strong>Size : 13.11 MB</strong></li>
    <li><strong>Downloads : 12</strong></li>
    <li><strong>Category :<a href="http://apkapp.in/software/list/1430431"> Communication</a></strong></li>
    <li><strong>Price : Free</strong></li>
    </ul></td></tr></table></td>
    <td><script data-cfasync="false" type="text/javascript" src="http://www.adnetworkperformance.com/a/display.php?r=449076"></script></td></tr></table>
    </div>
    
    <div class="mobile text">
    <table><tr><td width="100px"><span class="thumb"><img src="http://img.wapkafile.com/software/thumb/43908225/2696215/935beea5c2c820f5a5e54a65cc7fcc52/240.jpg" /></span></td><td width="*"><h2>ChatAdda</h2>
    <ul><li><strong>Size : 13.11 MB</strong></li>
    <li><strong>Downloads : 12</strong></li>
    <li><strong>Category :<a href="http://apkapp.in/software/list/1430431"> Communication</a></strong></li>
    <li><strong>Price : Free</strong></li>
    </ul></td></tr></table>
    </div>
    <div class="mobile text"><script data-cfasync="false" type="text/javascript" src="http://www.adnetworkperformance.com/a/display.php?r=449076"></script></div>

但问题是，我使用@media CSS在移动和PC视图中显示块，方法是使用display:none到另一个视图，这样我就可以使用广告代码{{1} }）为第二个块使用两次。如何仅使用广告代码一次并且不使用表格来显示相同内容？

Answer 1

不是为移动和网络视图创建两个具有相同内容的div，而是使用媒体查询隐藏/显示其中一个内容，您应该在html中包含一次内容，并使用媒体更改它们的显示方式查询。

像;

<body>
    <div class="block">
        ... content goes here
    </div>

    <div class="block">
        ... content goes here
    </div>
</body>

<style>
    @media only screen and (min-width:1220px) { 
        .block { display: inline-block; vertical-align: middle; } 
    } 

    @media only screen and (max-width:1220px) { 
        .block { display: block; }
    }
</style>

如何使用CSS和HTML创建响应式块

1 个答案: