構建響應式模板是一個漫長而詳細的過程，它涉及到協調所有站點的元素，從而形成一種完美的風暴，允許在最大的桌面瀏覽器窗口之間流暢地、表面上無縫地過渡到最小的移動設備。
在構建我們的演示時，我們需要考慮幾個設計選擇，以演示我們的模板的能力，并為用戶提供最好的體驗。
在我們開始使用一些技巧來讓我們的演示內容看起來像它所做的樣子之前，你可能會想看看這些博客文章，概述我們對響應性設計的看法。
我們的響應模板只是一個被執行的響應性站點的一部分。您的內容應該在不同的瀏覽器寬度中獲得成功。任何具有固定大小的內容都可能對頁面在各種屏幕上的負載產生有害影響。從文本到圖像的所有內容都應該能夠隨意伸縮。
響應的圖像
為了創建響應性的圖像，我們需要覆蓋兩個點。
不要修改圖像的寬度和高度
首先，您不能為放置在站點上的任何圖像指定固定寬度和高度屬性。最大寬度或高度是可以的，但是將任何圖像鎖定到特定大小很可能會破壞站點的響應特性。
下面是一個圖像集合的例子，它將打破響應式布局:
這樣做可以將圖像鎖定為200px*600px，而不考慮屏幕的大小。為了解決這個問題，我們提供了一個名為的自定義類。你可以把你的形象包裝在一起。
這樣做將確保圖像具有響應性，并將按比例與其他內容相應伸縮。
圖像寬度和容器寬度
圖像的寬度應該與最大寬度的容器相匹配。讓我們來看看如何在“RokSprocket特性”模塊中獲得最佳寬度。
在裁剪和調整實際圖像之前，我們可以使用占位符圖像來創建大圖像。Placehold。它是一個提供快速簡單的圖像占位符的服務。在下面的示例中，圖像的寬度為1000px，高度為500px。
下面，我們來看看在瀏覽器中如何顯示1000px*500px圖像。
現在，您可以調整瀏覽器的大小來調整兩個屏幕大小。您還可以使用Chrome Developer工具欄來檢查圖像的寬度。在這個例子中，一個大屏幕(>=1200px寬度)顯示了659px的圖像。
將瀏覽器的寬度縮小到767像素或以下，提升了網站響應能力的智能手機階段。在本例中，圖像寬度為478px。
從上面的結果，我們將取最大寬度659px。現在我們可以將實際圖像調整為659px寬度。對于高度，您可以調整它以符合文章的描述。在我們的演示中，圖像的高度是350px。這并不意味著你所有的圖像都應該被裁剪或調整到659px的寬度，盡管這樣做肯定會改進你的網站的優化，因為它只需要用戶下載圖像文件的大小。
自定義響應電網
我們有一些響應網格類，您可以使用它們來為您的內容創建自定義寬度。
在使用這些類時，首先應該定義要創建基于百分數的塊的代碼，然后定義該塊的百分比。
重復這個過程，直到所有給定的行都等于100%。在移動視圖中，這些塊在平板或桌面視圖中會疊在一起，這些塊會相應的伸縮。
如果你想要在你的方塊之間有間隔或空白，那就使用Spacer類。
示例:兩個塊的HTML以60/40分割，中間有一個邊距:
下面是這個方法的一個例子。鼠標-在編號的callouts上看到這個例子的每個區域使用的類。
在較小的平板電腦、更大的標準智能手機視圖中，這些塊將會被下面的內容堆疊起來。
下面是與之前的mobile view相同的內容區域，演示了在沒有類限制的移動模式下，模塊如何保持完整的響應式布局。
在Vermilion之后制作的模板使用了Flexbox，它使用的是容器而不是塊。下面是這些新模板中使用的方法的一個示例:
