Question

我有一个浮动标题，当窗口大小改变时会调整大小。我也有＃链接滚动到网站的相应部分;标题不应与#link的目标重叠。我使用此代码完成了使用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 */
}

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

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

由于

Answer 1

不使用bootstrap，使用media query是您的下一个选择。

例如，如果您希望css在1920px的屏幕上与1280px的屏幕上做出不同的反应，那么您的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;
  }
}

散列标记链接不重叠响应浮动标头CSS

1 个答案: