javascript - 使用 JS 和 CSS 使 header 仅适用于蜂窝媒体

Question

我在这里的前端设计从来都不是很擅长，而且我在这里遇到了一些问题。我想要实现的是让网站的标题只固定在移动设备上说

<div class='row' id='header' >&nbsp;</div>

我可以使用 bootstrap 和 Foundation，因为我熟悉它们的基础知识，但我无法集中精力做我想做的事。我希望 header div 仅针对移动设备固定，这样当您从大屏幕/计算机访问时，它就不会固定，并且随着滚动的流动而移动，但只有移动设备才会固定在顶部。现在我可以简单地使用 Jquery 更改 css 属性，但我不知道如何找出并检查设备是大屏幕还是小屏幕，例如

if(deviceScreen==big){//keep it relative/absoolute} else //make it fixed 

如果它可以只用 css 来完成，我会非常乐意这样做。

我在这里面临的另一个问题是固定元素(特别是只出现在小型设备上的侧边栏/主导航变成侧边栏)我希望它固定在左侧但可以自己滚动，因为一些选项不可见，因为它们不适合屏幕。我真的需要帮助，该网站不是我开发的。我受雇进行一些后端更改，并需要修复此处提到的一些前端错误

Answer 1

使用 CSS 媒体查询来确定屏幕尺寸。

如果假设屏幕不超过 600 像素:

@media (max-width: 600px) {
     #header {
           position:fixed;
           top:0;
     }
}

header 的 css 规则仅在屏幕宽度不超过 600 时应用。然后将其固定在顶部。

您可以将多个 meda 查询添加到单个 dom 元素，在用户更改浏览器宽度时根据您的需要进行调整。

有关媒体查询的更多信息:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries