我想弄清楚隨着屏幕變寬，添加內容的最佳做法。響應式用戶界面在斷點處添加內容
許多響應式指南顯示如何使用媒體查詢重新排列項目並使其變大或變爲不同風格的內容。
但是，如果我想在視口變大時在屏幕上顯示更多內容，該怎麼辦？
Bootstrap 4有Responsive utilities可以隱藏特定斷點處的項目。但感覺不對。項目只隱藏。
然後，有新的Angular Flex Layout你可以讓你的代碼響應斷點事件。這聽起來像一個解決方案，但必須有另一種方式來處理這個問題。
我決定使用ngIfMediaQuery這是一個圍繞window.matchMedia API的薄包裝，非常易於使用。
<div *ngIfMediaQuery="'(min-width: 500px)'">
...
</div>
我想大多數人使用的引導的顯示/隱藏公用事業等效的，因爲它操作簡單，且易於設計和前端開發者神交。儘管如此，你是對的。它正在加載客戶端不需要的東西。它可以用於切換背景圖片網址，但不是其他任何內容。
在前端js上，只有在檢查視口大小或用戶代理後，纔可以ajax或以其他方式請求腳本，樣式和內容。例如，通過將ajax放入一個根據視口大小運行或不運行的函數（並在視口事件中重新檢查），可以在該華麗的側欄標籤雲中使用ajax。這可能是最靈活的方法，並且可以像您想要的那樣簡單或複雜 - 儘管它不會像將hidden-xs放入您的標記那樣簡單。
您可以在後臺使用設置會話/ cookie參數的前端腳本來完成此操作。據我所知，沒有完成這個任務的標準方法，並且它顯然不太適應視圖更改，如在橫向/縱向之間切換。亞馬遜這樣做，我很確定它基於用戶代理。
所有這一切的一個重要考慮是搜索引擎優化。你想確保谷歌沒有得到一張滿臉的js而沒有別的東西。 They wrote a nice article on all of this，你應該去閱讀它。例如，如果您打算根據用戶代理服務不同的js，他們建議添加一個HTTP標頭，告訴Google嘗試使用不同的用戶代理來檢索網站。