当我快速调整浏览器时，为什么照片下面会有间隙？ （媒体查询）

Question

Demo here

我在enquire.js中使用一系列基于高度的媒体查询来“缩放”图片。当您快速增加浏览器的高度时，图片和页脚之间会有很大的差距。如果你慢慢增加高度，就没有很大的差距。

这是错的：

这是对的：

在控制台中，当发生间隙时，您可以看到几个不匹配在同一浏览器高度触发。那是为什么？

我的实施有什么问题吗？我可以使用enquire.js以某种方式覆盖此行为吗？

我的查询限制有点小。当我在查询之间使用更大的间隙时，这个问题没有发生。理想情况下，我想保留这些小的查询限制。这是我的代码：

CatZoomHelper = {

  meowZooms: [
    1.70
    1.60
    1.51
    1.41
    1.35
    1.30
    1.25
    1.20
    1.15
    1.10
    1.05
    1
    0.95
    0.90
    0.89
    0.87
    0.83
    0.79
    0.75
    0.72
    0.65
  ]

  registerMediaQueries: (handler) ->
    enquire.register("screen and (min-height: 1220px)", handler(1.70))
    enquire.register("screen and (min-height: 1136px)", handler(1.60))

    enquire.register("screen and (max-height: 1135px)", handler(1.51))
    enquire.register("screen and (max-height: 1070px)", handler(1.41))
    enquire.register("screen and (max-height: 1010px)", handler(1.35))
    enquire.register("screen and (max-height:  989px)", handler(1.30))
    enquire.register("screen and (max-height:  940px)", handler(1.25))
    enquire.register("screen and (max-height:  925px)", handler(1.20))
    enquire.register("screen and (max-height:  875px)", handler(1.15))
    enquire.register("screen and (max-height:  850px)", handler(1.10))
    enquire.register("screen and (max-height:  830px)", handler(1.05))
    enquire.register("screen and (max-height:  790px)", handler( 1.00))
    enquire.register("screen and (max-height:  745px)", handler(  .95))
    enquire.register("screen and (max-height:  725px)", handler( .90))
    enquire.register("screen and (max-height:  685px)", handler( .89))
    enquire.register("screen and (max-height:  618px)", handler( .83))
    enquire.register("screen and (max-height:  590px)", handler( .79))
    enquire.register("screen and (max-height:  570px)", handler( .75))
    enquire.register("screen and (max-height:  550px)", handler( .72))
    enquire.register("screen and (max-height:  520px)", handler( .65))
}

handler = (zoom) ->
  zoom: zoom

  MAX_ZOOM: 1.7

  setup: ->

  zooms: CatZoomHelper.meowZooms

  match: ->

    this.zoomIndex = this.zooms.indexOf(this.zoom)
    if this.zoomIndex is -1
      this.zoomIndex = this.zooms[7]
      console.error 'zoomIndex is off'   
    console.log 'MATCH: zoom' + this.zoom + 'window height: ' + window.innerHeight

    $('img').css("height",(689*this.zoom)+"px")

  unmatch: ->
    unmatchZoom;
    if this.zoom is this.MAX_ZOOM
      unmatchZoom = this.zooms[this.zoomIndex + 1]
    else
      unmatchZoom = this.zooms[this.zoomIndex - 1]

    $('img').css("height",(689*unmatchZoom)+"px")

    console.log "UNMATCH from zoom " + this.zoom + "TO " + unmatchZoom + 'window height: ' + window.innerHeight

CatZoomHelper.registerMediaQueries(handler)

Answer 1

我的解决方法是

• 使用更具体的媒体查询，因此没有不同的行为 当收缩并增加浏览器窗口的大小时。
• 完全摆脱不匹配的功能。 （符合不匹配是一种清理功能而不是匹配的对立的理念）
• 以不同的顺序注册媒体查询。

我的注册顺序现在是：

  registerMediaQueries: (handler) ->

    enquire.register("screen and (max-height:  520px)", handler(.65));
    enquire.register("screen and (max-height:  550px) and (min-height:  521px)", handler(.72));
    enquire.register("screen and (max-height:  570px) and (min-height:  551px)", handler(.75));
    enquire.register("screen and (max-height:  590px) and (min-height:  571px)", handler(.79));
    enquire.register("screen and (max-height:  618px) and (min-height:  591px)", handler(.83));
    enquire.register("screen and (max-height:  685px) and (min-height:  619px)", handler(.89));
    enquire.register("screen and (max-height:  725px) and (min-height:  686px)", handler(.90));
    enquire.register("screen and (max-height:  745px) and (min-height:  726px)", handler(.95));
    enquire.register("screen and (max-height:  790px) and (min-height:  746px)", handler(1.00));
    enquire.register("screen and (max-height:  830px) and (min-height:  791px)", handler(1.05));
    enquire.register("screen and (max-height:  850px) and (min-height:  831px)", handler(1.10));
    enquire.register("screen and (max-height:  875px) and (min-height:  851px)", handler(1.15));
    enquire.register("screen and (max-height:  925px) and (min-height:  876px)", handler(1.20));
    enquire.register("screen and (max-height:  940px) and (min-height:  926px)", handler(1.25));
    enquire.register("screen and (max-height:  989px) and (min-height:  941px)", handler(1.30));
    enquire.register("screen and (max-height: 1010px) and (min-height:  990px)", handler(1.35));
    enquire.register("screen and (max-height: 1070px) and (min-height:  1011px)", handler(1.41));
    enquire.register("screen and (max-height: 1135px) and (min-height:  1071px)", handler(1.51));
    enquire.register("screen and (max-height: 1220px) and (min-height:  1136px)", handler(1.60));
    enquire.register("screen and (min-height: 1221px)", handler(1.70));

解决方案演示here。

enquire.js项目的问题#80，#38和#29有助于深入了解这一点。