自定義屏幕斷點引導3

Question

我最近注意到，我設計的網站開始看起來非常糟糕，當你低於360px。當它使用媒體查詢獲得低於360px的時候，我可以對網站進行css更改。但是，我想知道是否有辦法自定義隱藏和可見選項？

我的目標是通過隱藏當前內容並使可見的一組專門針對該尺寸的新內容，使網站看起來更好地適應較小的分辨率。

我的第二個問題是它是否值得這樣做。在媒體查詢中使用CSS改變整個網站會不會更好？另一種選擇是創建一個新頁面，並讓用戶路由到該頁面，如果他們的屏幕尺寸爲< 360px。我不確定什麼被認爲是好的做法，任何建議/幫助將不勝感激！

Answer 1

使用上引導網站上的自定義來定義新的斷點

http://getbootstrap.com/customize/

或本：

@media only screen and (max-width: 360px) { 
    .xxs-hidden{ 
     display: none;//this is your own customised hidden class maybe? 
    } 


} 

如果你想創建不同的頁面，你不希望使用媒體查詢檢查每個屏幕的分辨率，您可以使用jQuery檢查屏幕大小，並導航到該屏幕大小的HTML文件：

<script> 
    if (screen.width <= 360) { 
    window.location.replace("http://www.theExtraExtraSmallPage.html"); 
} 
</script>