Question

我做错了吗？基本上，当某人使用移动版本时，我希望前两个gre表格为全宽度JSFidle

CSS

@media screen and (max-width:480px){
      table[class="mobile_version"] {
      width:100%; !important;
      };
    };
    @media screen and (max-width: 480px){
    td[class="mobile-hide"]{
      display: none !important;
    };
   };
    @media screen and (max-width: 480px){
    td[class="mobile-show"]{
      display: inline !important;
      text-align: right;
    };
   };

HTML

<tr>
        <td>
          <table class="mobile_version" style="float:left;display: inline-block;background-color:#F2F2F2; color: #231F20;font-family:Arial; font-size: 15px;height:50%; padding: 10px 10px 40px 10px; text-align: left; width: 45%;Margin-right:3%;line-height: 168%;Margin-top:10px">
            <tr>
              <td>
                <div>
                  <span>
                  <div><span style="font-weight:bold">Order #:</span><span>&nbsp;&nbsp;35644:</span></div> 
                  <div><span style="font-weight:bold">Ordered by:</span><span>&nbsp;&nbsp;Dan Utterwood</span></div> 
                  <div><span style="font-weight:bold">Paid by:</span><span>&nbsp;&nbsp;Debit Card</span></div>
                  <div><span style="font-weight:bold">Expected Delivery:</span></div>
                  <div><span>14th December</span></div>
                  <div><span style= "font-weight:bold">Postage Method:</span></div>
                  <div><span>Airmail</span></div>
                </div>
              </td>
            </tr>
          <table class= "mobile_version"style="float:left;display: inline-block; background-color:#F2F2F2; color: #231F20;font-family:Arial; font-size: 15px;height:50%; text-align: left;padding: 10px 10px 40px 10px; width: 45%;min-height:170px;Margin-top:10px">
            <tr>
              <td>
                <div>
                  <div><span style= "font-weight:bold; line-height:170%">Ordered to:</span></div>
                  <div><span>Ross Kemp</span></div> 
                  <div><span>Space</span></div>
                  <div><span>Spacey Space</span></div> 
                  <div><span>Spacey space, space</span></div>
                  <div><span>SP4C5E</span></div>
                  <div><span>Spaaace</span></div>
                  <div><span style= "font-weight:bold; line-height:135%">Delivery Instructions:</span></div>
                  <div><span>Leave with neighbors cat<span></div>
                </div>
              </tr>
            </td>
          </table>
        </td>
      </tr>

我已经让它响应了，你可以看到内联：块然而它只是不会阅读媒体查询

= - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = -

已更新

好的，所以这很棒我有媒体查询但是因为我已经把它们放进去了我有一些问题

第一组方块不再在一条线上对齐，我不能在右侧设置边距
其次我似乎没有两个td.blahblah {afafsasdff}并且他们取消了彼此

JSFIDDLE

Answer 1

你的CSS有很多问题。如果您使用类选择器$(document).ready(function() { function sizeContainer() { $('.container').css('width', window.innerWidth); } function loop() { $('.balloon').css('left', '-50px'); $('#promo').animate({ left: '+=100%', }, 10000, 'linear', function() { loop(); }); } // Run initial functions. sizeContainer(); loop(); $(window).resize(function() { // Re-run functions on window resize. sizeContainer(); }); });而不是属性选择器.，那么首先会更好。分号写得不好。它不需要在CSS中的每个换行符之后放置分号，只在属性的末尾。

您可以在此处查看： http://jsfiddle.net/tLutv389/1/

那是你的新css

[attr]

Answer 2

  Change your css code

  @media screen and (max-width:480px){
          table[class="mobile_version"] {
          width:100% !important;//width:100%; !important; was wrong
          };
        };
        @media screen and (max-width: 480px){
        td[class="mobile-hide"]{
          display: none !important;
        };
       };
        @media screen and (max-width: 480px){
        td[class="mobile-show"]{
          display: inline !important;
          text-align: right;
        };
       };

媒体查询无效？

2 个答案: