I've started to really get into coding using HTML5 and CSS3 over the past 3 weeks and even started on my own project.
I've come across people saying "MOBILE FIRST!!" a lot along the way, and I've been looking into it and found out how to do it using media queries.
I use the Atom text editor to write my source code, and view my html file on chrome.
My question is, what program or extension do people normally use to view their code on different device types?
Many thanks!
Dan
I don't think there's a reason to use any extension. You can quickly get all possible dimensions by using the developer tools.
Open the developer tools using Ctrl+Shift+C on Windows or Command+Option+J on Mac and toggle the device toolbar Ctrl+Shift+M or Command+Option+M on a Mac.
Then, at the top of the screen, you have the option to choose the height and width you desire. You can also create custom device dimensions by clicking on the edit button inside the dimensions menu:
In the menu that opens, you can add your custom device/use an existing device from the list:
What I usually do when I work on a responsive design is to resize the site's width manually. I also use my mobile device in order to see the differences more reliably. (Gif of the resizing)
As the user Huangism mentioned, resizing through the dev-tools won't always give you reliable results, which is why you should check the design through an actual mobile device.
Note that the dev tool phone simulator may not give exact result as an actual phone in some cases, always check your work on a phone
There's a chrome extension that I used to have, but I didn't find it too comfortable to use. You can take a look; it's called Responsive Viewer
You choose which devices/dimensions you want, and you get a layout of the selected devices:
In general, I find manual resizing the best option when working on responsive designs.
