Question

在MY WEBSITE上我有这段代码：

<div>
    <center><a href="foo.html"><img src="images/ipadframe.png" width="200" height="300"></a></center>
  </div>  
<div style="position:absolute; left:233; top:35;">
    <img src="images/xclomobi.jpg" width="152" height="233">
</div>
            <div class="section_w280 fl">
                <ul class="future_project"><br><br>
                    <li>Website: <a href="#" target="new">#</a></li>
                    <li>Role:<font size="2"> CSS / PHP / MYSQL</font></li>
                    <li>#li>
                </ul>
                <div class="cleaner"></div>
            </div>


            <div class="section_w140 fr"><br><br>
                <div class="rc_btn_02"><a href="#">Visit</a></div>
                <div class="cleaner"></div>  
                </div>      

            <div class="margin_bottom_20 border_bottom"></div>         
</div>

完全显示在我的桌面上，但不能显示在我的ipad或小屏幕上。

如何编辑上面的div样式，以便在上面列出的设备上查看时，它会加载读取替代代码？

无论他们在哪个设备上查看它，都有办法让它正确显示吗？

Answer 1

您需要的是使用@media查询来实施响应式设计 ...

iPAD人像和风景

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* STYLES GO HERE */}

iPAD LANDSCAPE

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* STYLES GO HERE */}

iPAD PORTRAIT

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* STYLES GO HERE */ }

通过使用它，您可以仅为该设备设置CSS样式... 还需要阅读this ...

Answer 2

我发现自己跳入的另一个选择是响应式框架，如Bootstrap或Foundation by ZURB。它们提供了大量的组件，可以让您在创纪录的时间内获得响应方式。两者都有其优点和缺点，你应该评估哪一个适合你的需要。

图像覆盖另一个图像

2 个答案: