A mobile responsive webpage is a page that looks good on large screens and small screens. We call it mobile responsive because mobile (smart)phones have some of the smallest screens we access the internet with, although it's not limited to just phones.
Some people browse websites and zoom in on their desktop PCs to help them see the page better, at which point the screen size changes and mobile responsiveness also comes into play. (Try holding Ctrl and pressing + a few times on your computer until mobile responsiveness kicks in! You can hit Ctrl + 0 to reset your zoom level to default.)
In CSS, we use a bit of coding that tells the browser "Once we hit this many pixels (often 900px, 500px, and 450px), apply the following specific CSS code to override the regular desktop code".
This does NOT mean we need to re-code the entire style from scratch! Rather, we try to focus on overriding the elements that aren't resizing automatically, adjust font sizes, padding, and make navigation menus accessible on small screens.
We only end up overriding the code that we need to override because those elements don't look good on the smaller size screens. Some of my styles only require a little bit of extra mobile responsive code, while others require a lot of overriding because I want to achieve a particular look. We can also cascade several screen size overrides as needed. RPR commonly uses mobile responsive code at various screen widths to finetune the styling and ensure nobody gets left out no matter how narrow their screen is.
There are no set mobile screen widths, although
the default RPR code Kim gives us has intervals at 900px, 500px and 450px. Depending on your style design, you may find that you need to start applying mobile overrides at 1100px, or that you don't need to make further adjustments for the smallest screen sizes at all.
Because this works with screen width, you can easily test your mobile responsive code on a desktop or laptop computer by simply pulling out the page into its own window, making sure it's not maximized, and then making the screen width smaller. If
you use the browser inspector, it will also tell you what the screen width currently is to help you find the exact spot where your style changes are needed.