0

在我的网站上 ，我有这个代码：

<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 样式，以便在上面列出的设备上查看此代码时加载读取替代代码？

无论他们在什么设备上查看它，有没有办法让它正确显示？

4

2 回答 2

2

您需要的是通过使用查询来实现响应式设计@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 样式...还需要阅读此...

于 2013-10-17T14:34:04.290 回答
1

我发现自己跳入的另一种选择是响应式框架，例如ZURB 的Bootstrap或Foundation 。它们提供了大量的组件，让您在创纪录的时间内做出响应。两者各有利弊，您应该评估哪一个适合您的需求。

于 2013-10-17T14:39:33.817 回答