
# 前言

>这是一个小问题，但是我一直拖到现在才慢慢排出来
>
>还有，GitHub 2FA，wcnm

最近发现，在本主题下，我若电脑访问，搜索框可正常显示，但若缩小窗口，搜索框却隐藏了，理论上说，不应该是始终展示的吗？

# 排查

如果搜索框在缩小后不可见，可以先尝试排查 CSS 文件的 `@media` 属性，这个属性设置了在指定分辨率设备下的显示属性

经过搜索，在 `_common.css` 查询到 `@media (max-width: 1128px) { .show-md{ display: block !important; } }`

>当页面所在的浏览器窗口的最大宽度小于等于 1128px 时，所有带有 `show-md`  类的元素将被设置为  display: block ，使用 `!important` 确保优先级别

回想一下，缩小窗口后，`display: block` 也就因为此而被执行，我在主题设置里将侧栏关闭了，[在演示页面中](https://raw.githubusercontent.com/math-queiroz/rusty-typewriter/main/images/screenshot.png) 是将搜索框写在侧栏中，因此，搜索栏也随之被隐藏了。

但是，在访问其演示页面的移动端时，侧栏没有显示，因此可以判断，在演示页面，侧栏其他部分被隐藏，只有搜索框被展示

也就是主题作者在电脑端将搜索框单独独立了出来

在构建网站时，我在主题中关闭了侧栏的显示，因此移动端搜索框也跟着侧栏隐藏了，但是电脑端搜索栏单独写出来，因此不受影响

所以说只需要我删掉这段判别客户端的部分，侧栏始终展示即可


Source: https://linserin.work/posts/rusty-typewriter-search-bar/