哈希標籤鏈接不重疊響應浮動頭CSS

我有一個浮動頭，當窗口大小更改時調整大小。我也有＃鏈接滾動到網站的相應部分;標題不應與＃鏈接的目標重疊。我做到了這一點使用CSS使用此代碼：哈希標籤鏈接不重疊響應浮動頭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代碼來觸發不同的版本？

感謝

來源

2017-10-11 David G.

您應該使用[CSS媒體查詢]（https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries）使您的CSS適應多種配置 – Isac

不使用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; 
    } 
}

來源

2017-10-11 00:44:07 RThomP

哈希標籤鏈接不重疊響應浮動頭CSS

回答

相關問題