HTML

Firefox and all Chromium browsers (Google Chrome, Edge, …) all have great tools to help you with that. First and foremost, both have a developer tools bar (activated by pressing either Ctrl+Shift+I, F12 or by going into the browser menu and under the section “More tools”) where you can highlight certain elements and further inspect them. You will see all the applied style rules on the right-hand side in the standard interface. This way you can check whether certain rules are active or not and where they come from.
Furthermore, these developer tools include a device toolbar or responsive design mode, activated by either clicking the small phone and tablet icon on the developer toolbar or by pressing Ctrl+Shift+M. When activated, your actual browser window is sectioned off from the rest of the browser and can be either set to some of the preset phone display sizes, which include some of the latest phone models, or be resized manually in the responsive mode like any normal window. The benefit from doing resizing this way is that the toolbar shows you how big the “display” is regarding pixel size, which helps immensely with implementing rules for different screen sizes.
If you want to test the look and feel on an actual device, you can have some your personal mobile phones or tablets connect to them via the local network. I assume you are already running some kind of local web server like XAMPP. Then you can easily figure out your local IP with some simple commands for the command line tools/terminals (e.g. ipconfig on Windows, nettop on MacOS, ifconfig on Linux).