レスポンシブサイトは、デバイスの画面サイズによってメディアクエリーを定義して読み込まれるCSSの内容を変更するテクニックなんですが
緑は、「max-widthで定義されている最大画面サイズ」
紫は、「min-widthで定義されている最小画面サイズ」
青は、「max-widthとmin-widthで定義された中間のサイズ」
として表示されています。
Dreamweaverのウィンドウサイズを変更してみると、各バーの値を起点に読み込まれるCSSが変化することが分かると思います。
Dreamweaverのメディアクエリーの作成と使用方法については、以下のサイトの解説が詳しいと思いますので、そちらを参照してみて下さい。
https://helpx.adobe.com/jp/dreamweaver/using/visual-media-queries.html