javascript - 哈希标签链接不重叠响应式 float 标题 CSS

Question

我有一个 float 标题，它会在窗口大小更改时调整大小。我还有#个滚动到网站相应部分的链接； header 不应与# 链接的目标重叠。 我使用以下代码使用 CSS 实现了这一点:

:target:before {
content:"";
display:block;
height:250px; /* fixed header height . with 250 it works for desktop.*/ 
margin:-250px 0 0; /* negative fixed header height . 250 also here */
}

问题在于，由于 header 是响应式的并且会调整大小，因此当您在较小的设备上使用链接时它无法正常工作。

我应该向此 CSS 代码添加什么以根据窗口大小触发不同的版本？

谢谢

Answer 1

不使用 bootstrap , 使用 media query是你的下一个选择。

例如，如果您希望您的 CSS 在 1920 像素和 1280 像素的屏幕上有不同的 react ，您的 CSS 可能如下所示:

media screen min-width: 1920px {
  :target:before {
    content:"";
    display:block;
    height:250px;  
    margin:-250px 0 0;
  }
}

media screen min-width: 1280px {
  :target:before {
    content:"";
    display:block;
    height:125px;  
    margin:-125px 0 0;
  }
}