These are the device frames that to which the device adapts to in terms of device width,  if you open WYSIWYG software, tha blank page is a breakpoint, You can still design in it as a single page breakpoint to work across all your devices not specific to small or large screen.

 

In responsive web designing, it is much required to design using breakpoints, this keeps focus of your user on signt without zooming in and out such that they can read the content on the page. I therefore usually recommend you to use breakpoints.

 

Practicle test of a responsive designed website,

!. Browse any website on google chrome (mobile phone)

2. Load the page and see the interface that has been loaded currently. Revise it,

3. Then go to the 3 dots menu on your top right of the chrome browser.

4. The appearing pop, scroll until you see the Desktop site pop on the menu, select it and the page will be reloaded. (if the option was selected before, unselect the option to have the page load the mobile breakpoint.

5. In your memory is a recent UI (User Interface) breakpoint, now you can relate the designs to have changed, in relation to device adaptivity. that proves responsiveness in the design.

On this screen, you are going to learn how to make this adaptive and responsive. All starts with the Breakpoints creation in the designing of the website.