圖片覆蓋另一張圖片

Question

在我的網站上，我有以下代碼：

<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景觀

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

iPAD人像

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

通過使用此功能，您可以僅為該設備設置CSS樣式...也需要閱讀此內容 ...

Answer 2

我發現自己跳入的另一個選擇是響應式框架，例如Bootstrap或ZURB的Foundation 。 它們提供了數量驚人的組件，可幫助您在創紀錄的時間內采取響應式的方式。 兩者都有其優點和缺點，您應該評估哪個適合您的需求。