I'm trying to understand Dreamweaver's Toggle Visual Media Queries bar

I'm using Dreamweaver cc 18.0. I'm trying to understand the the Toggle Visual Media Queries Bar as a tool for designing responsive websites.

I'm used to using Adobe Captivate's responsive design tool. That makes sense to me. But Dreamweaver's bar is getting me a bit confused.

First off, why can't I create a visual media bar if I only have html? Do I need css?

Second, do I determine the number of sizes there are and the sizes themselves? Or does Dreamweaver do that?

I'm really designing for only a browser on the internet, a tablet device such as an iPad and a mobile device such as an android and phone. So why do I see more than these three sizes? And why are some of the sizes on top of each other, such as the sizes on the screen below.

Thanks for your help.