0

此页面 http://www.erica2013.dreamhosters.com/（使用 Zurb 基础框架构建）宽度超过 425 像素，在带有书架背景图像的 div 上有一排书。

在手机或浏览器中，当宽度小于 425 像素时，不使用背景，内部 div 变为行。

CSS

#homeBookshelfRow {
    margin-top:50px;
    background:url(../img/homepage/hmpg-mini-shelf/hmpg-shelf.png) bottom center no-repeat; 
    height:160px;
    padding:19px 0 0 11px;
    text-align:center;
}

#homeBookshelfHeadline {
    display:none;   
}

.phoneBookGroup {
    margin:0;
    padding:0;
    display:inline;
}

#homeBookshelfRow .phoneBookGroup .homebook {
    padding-right:10px; 
    cursor:pointer;
}

基于宽度的 CSS

@media only screen and (max-width: 425px) {  
    #homeBookshelfRow {
        background:none;
        height:auto;
        margin:0 0 20px 0;
    }

    #homeBookshelfHeadline {
        display:block;  
        font-family: 'Open Sans Condensed', sans-serif;
        font-size:2.25em;
        color:#b11717;
        padding:0;
        margin:0;   
    }

    .phoneBookGroup {
        display:block;
        margin-bottom:10px;     
    }


}

HTML

<div class="row" id="homeBookshelfRow">
    <p id="homeBookshelfHeadline">
    Bookshelf
    </p>

    <div class="phoneBookGroup">
        <img src="/bookshelf/HCcovers/21_199.jpg" alt="Justice for Sara" width="88" height="141" rel="21" data-urlname="Justice-for-Sara" class="homebook">
        <img src="/bookshelf/HCcovers/22_199.jpg" alt="Storm Season" width="88" height="141" rel="22" data-urlname="Storm-Season" class="homebook">
        <img src="/bookshelf/HCcovers/23_199.jpg" alt="Wishing Moon" width="88" height="141" rel="23" data-urlname="wishing-moon" class="homebook"></div>
  <div class="phoneBookGroup">    
        <img src="/bookshelf/HCcovers/18_199.jpg" alt="Watch Me Die" width="88" height="141" rel="18" data-urlname="Watch-Me-Die" class="homebook">
        <img src="/bookshelf/HCcovers/19_199.jpg" alt="Slices of Night" width="88" height="141" rel="19" data-urlname="Slices-of-Night" class="homebook">
        <img src="/bookshelf/HCcovers/17_199.jpg" alt="Blood Vines" width="88" height="141" rel="17" data-urlname="blood-vines" class="homebook"></div>
   <div class="phoneBookGroup">    
         <img src="/bookshelf/HCcovers/16_199.jpg" alt="Breakneck" width="88" height="141" rel="16" data-urlname="breakneck" class="homebook">
        <img src="/bookshelf/HCcovers/24_199.jpg" alt="Chances Are" width="88" height="141" rel="24" data-urlname="chances-are" class="homebook">           
    </div>   
   </div>

它最初呈现良好，但以下 AJAX 调用更改了大书图像和侧边栏内容。当在所有测试过的浏览器中发生这种情况时，不再呈现基于宽度的 CSS，而是呈现常规 CSS。

为什么会这样？我如何解决它？

$('.homebook').click(function() {
  var id = $(this).attr('rel');
  var urlname = $(this).attr('data-urlname');
  //console.log("Book id " + id);
  $('#bigHomeBook').attr( 'src' , '/bookshelf/hmpg-mini-shelf/large/'+id+'.jpg'  );
  $('#bigHomeBookLink').attr( 'href' , '/bookshelf/' + urlname );

  $.ajax({
      url: 'inc/home_book_ajax.php?bID=' + id,
      success: function(data) {
        if (data == 'bad') {

        } else {
            $('#rightSidebar').html( '' );
            $('#rightSidebar').addClass( 'reviewRed' );
            $('#rightSidebar').html( data );
        }
      }
    }); 
});
4

2 回答 2

0

我也遇到了这个问题——在任何 Ajax 更新之后，我的 @media CSS 样式都没有被应用。

对我来说，我使用的是 ASP.NET 和 Telerik 控件，我找到的解决方案是禁用 Ajax 请求的页头更新：

www.telerik.com/help/sitefinity/developer-manual/radajax.net2-telerik.webcontrols.radajaxutils.radajaxcontrol-enablepageheadupdate.html

我希望这可以帮助您或其他人为您的技术找到合适的解决方案。

于 2015-01-02T19:31:43.083 回答
0

您可能需要 max-device-width ，因为浏览器正在更改当前宽度以匹配内容（导致滚动或缩放并且不再匹配您的媒体规则。）

看看： 移动网络的 max-device-width 和 max-width 有什么区别？

编辑：这里有一个更好的链接，更多选项和 iphone 特定的奇怪之处： http ://www.quirksmode.org/blog/archives/2010/09/combining_meta.html

我还做了一个小探测器来获取实际数字：http: //jsfiddle.net/JztA4/2/

<html>
<head>
  <script>
    var s = "";
    for (var i = 0; i < 4096; i++) {
      var dev = i % 2 ? "device-" : "";
      s += "\n @media all and ( min-" + dev +
        "width:" + i / 2 +
        "px) {\n#" + dev + "width:before {\ncontent:'" + Math.floor(i / 2) +
        "';\n}}\n";
    }
    s += "\n#sanity:before{content:'youbet';display:inline;}\n";

    l = document.createElement("link");
    l.setAttribute("type", "text/css");
    l.setAttribute("rel", "StyleSheet");
    l.setAttribute("href", "data:text/css," + s);
    document.head.appendChild(l);
  </script>
</head>

<body>
<ul>
    <li>sanity: <span id="sanity"></span>
    </li>
    <li>width: <span id="width"></span>
    </li>
    <li>device-width: <span id="device-width"></span>
    </li>
</ul>
</body>
</html>

但是我对数据 uri 等的使用也会让旧版浏览器感到不安，因此您需要将样式复制到真正的 css 工作表或样式元素中。

我没有迫切需要创建一个完全动态的网站，所以我不会绘制结果，但如果有人这样做，请考虑更新 jsfiddle 和/或这个问题。

于 2013-06-25T18:31:20.330 回答