如何管理響應式網站的Bootstrap LESS文件？

Question

這是一個通用的問題。我正在建立一個使用Bootstrap的網站，該網站必須具有響應能力。我想知道在LESS/css上工作的「標準」過程是什麼。

首先，您爲標準網站（用於桌面顯示）創建css規則？ 其次，您在相應的LESS文件（responsive-767px-max.less等）中添加智能手機或平板電腦的特定規則？

問題是，有許多規則必須常見桌面和智能手機顯示！然後我應該在每個responsive-xxx.less文件中複製這些規則。我認爲這不太舒適。也許通用規則必須寫在bootstrap.less，低於@import規則？

總之，我很想知道你是如何管理這些東西的。

Answer 1

從理論上講，響應比您描述的更自下而上。

1. 首先，你要確保你的網站/應用最準系統瀏覽器的工作原理，以最少的支持CSS和JS的。
2. 然後，你從那裏建立起來，增加「結冰」與更大的瀏覽器功能和窗口大小。

還沒有關於剛剛使用的斷點，但也使一些事情縮放大小，寬度，高度敏感，隨着調整窗口的大小。

實際上，只需使用Bootstrap，您即可獲得上述功能。除了在媒體查詢中對某些組件顯示或隱藏進行某些決定之外，您不必做太多事情，就像您所描述的那樣。

• 包含的響應樣式
• 使用的容器和行的流體版本，如：

這裏的相關引導文檔：

• http://twitter.github.com/bootstrap/scaffolding.html#responsive
• http://twitter.github.com/bootstrap/examples/fluid.html