I'mQQ站点是怎么做到网页缩小时某些元素宽度自动增加的？

Question

网页见：https://im.qq.com/download/

例如左上角的这个a（首页）,Chrome浏览器下缩放67%时是初始宽度36px，再缩小就开始变宽，一直到25%下的96px，而放大时宽度不改变，我仿制的网页中的对应元素宽度也不改变（无论缩放）。

我感觉这样可以在一定程度上避免缩放时元素错位，但是不知道原因。

我看到EventListeners中有resize这一项，感觉可能有关，但是jQuery源码中没有搜索到相关内容。

Answer 1

可以考虑用媒体查询进行实现

Answer 2

CSS3 mediaQuery

Answer 3

@media and (max-width: 600px) {
    div {
        width: 100%;
    }
}

Answer 4

可以用resize,监听窗口大小变化，然后更改样式，不过还要判断窗口大小，通过js更改样式。
$(window).resize(function() {
...
});
还是直接用媒体查询吧