Question

我们正在使用Magento v1.8做一个响应式网站，并且遇到一个问题，使得标题响应。我试过div，但没能使它工作。我去了桌子方法并且在那里使用了1/2，但仍然遇到了一些问题。

这是我想要实现的目标：

[___ Logo ____] [___搜索_____] [___购物车_____]（100％屏幕宽度）

随着分辨率（手机/桌子）改为

[___ _______标志

[___搜索_____]

[___车________]

现在看来，它会在3/4处折叠并且推车离开屏幕，如果我将它一直缩小，然后它们堆叠（尽管对齐已关闭。

这是我到目前为止所做的：

<style>


@media screen and (max-device-width: 600px), screen and (max-width: 600px) {
*[class=headermobilewrapper]{width:100%!important; height:auto!important;}
*[class=w320]{width:320px!important; height:auto!important;}
*[class=split]{width:320px!important; float:left!important; display:block !important;}  



</style>


 <?php $config = Mage::getStoreConfig('themessettings', $_GET['store']); ?>


 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="headermobilewrapper" align="center" bgcolor="#f3faf0">
   <tr>
     <td style="vertical-align:middle" class="split"> <a href="http://dev2"><img src="/images/header/header_logo.gif" ></a> </td>
     <td style="vertical-align:middle" align="center" class="split"> <?php echo $this->getChildHtml('topSearch'); ?> </td>
     <td style="vertical-align:middle" align="center" class="split"> <?php echo $this->getChildHtml('cartTop') ?> </td>
   </tr>
 </table>

我在更改格式，样式等方面没有任何问题。我已经尝试了几乎所有在Google上找到的方法，而且在这里，不管我做错了什么，或者我想要实现的目标都不在那里爱好。

Answer 1

您应该只申请table, td, tr display: block

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
    table, tr, td {
        display: block;
    }
}

http://jsfiddle.net/3ernd8up/

堆栈的响应表

1 个答案: