I have been building a Progressive Web App. For designing its layout, I have (erroneously) been using a viewport meta width of 720px, as it looked good on my mobile phone.
To make it functional on any device, I changed the width to "device-width", and I am trying to migrate from using pixels for the elements height/width/margins/padding/border, ...etc, to using viewport units.
I am doing this manually, and not at all efficiently. Until now, I've tried converting the size values of the elements by calculating their % over the device's resolution, but this gets complicated with margins, padding, borders...
Is there a way of seeing the box model (see below) for an entire HTML page?
Or is there a cleaner, less manual way of converting from px to vw,vh?
PS. I have seen some similar questions, but all seem focused on particular elements, not on the whole page.
