響應式設計，哪個組件應該有響應

Question

我使用Twitter引導框架來設計我的Web應用程序。當我想到響應式設計是響應式地設計我的佈局時，還是應該考慮文本框，標籤，按鈕和其他組件，以便在屏幕變得更大時進行響應。

而這將是我應該遵循的最佳解決方案，以創建一個響應式設計，在那裏我可以注意到最多的設備數量隨着不同分辨率的不斷髮展而不斷提高。

目前，我已經開發了我的應用程序，它響應與佈局，文本框，按鈕，標籤和標題上的所有決議，1024 -1439之間，1440- 1659，1660 - 1920年

和小於1024和大比1920px。

我應該如何在響應式設計上使用縮放比例。

我想知道這是行業標準還是應該在開發Web應用程序之前記住其他任何內容。

Answer 1

默認情況下，Twitter的Bootstrap響應。這包括所有組件和網格。

要找到您的答案，請先研究http://getbootstrap.com/css/#grid Twitter的Bootstrap定義了四個網格。最大網格的最大容器大小爲1170px。

大（COL-LG- *）被結合：

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: @screen-lg-min) { ... } 

你的設計需要較大的網格，用於至少1920px和向上。 其中1920x1080似乎是一個工業標準：http://en.wikipedia.org/wiki/1080p

根據Bootstrap的網格定義，我希望你應該用更大的網格來擴展網格。另請參見： 也Bootstrap 3 - 940px width grid?見， Twitter's Bootstrap 3 grid, changing breakpoint and removing padding

要添加和額外的網格，從下載引導的LESS文件：https://github.com/twbs/bootstrap/tree/master/less，增加一個額外的電網（）並重新編譯你的CSS。

在grid.less取代：

//or define in variables.less 
@screen-superlg: 1920px; 
@screen-superlg-min: @screen-lg; 

// Large screen/wide desktop 
//or define in variables.less 
@container-superlarge-desktop:  ((1860px + @grid-gutter-width)); 
@container-superlg:     @container-superlarge-desktop; 

.container { 
    .container-fixed(); 

    @media (min-width: @screen-sm) { 
    width: @container-sm; 
    } 
    @media (min-width: @screen-md) { 
    width: @container-md; 
    } 
    @media (min-width: @screen-lg-min) { 
    width: @container-lg; 
    } 
    /* Larger devices (HD TV, 1920px and up) */ 

    @media (min-width: @screen-superlg-min) { 
    width: @container-superlg; 
    } 
} 

，並添加：

// Super Large grid 
// 
// Columns, offsets, pushes, and pulls for the hd tv device range. 

@screen-lg-max:    (@screen-superlg-min - 1); // define in variables.less 

@media (min-width: @screen-superlg-min) { 
    .make-grid-columns-float(superlg); 
    .make-grid(@grid-columns, superlg, width); 
    .make-grid(@grid-columns, superlg, pull); 
    .make-grid(@grid-columns, superlg, push); 
    .make-grid(@grid-columns, superlg, offset); 
} 

這樣做後，你可以通過使用COL-superlg- *格列類使用新的超級大電網。

在此之後，您還應該擴展在less/responsive-utilities.less中定義的響應實用程序（http://getbootstrap.com/css/#responsive-utilities）。