When determining the size details, you are obviously guided mainly by the width of the viewport, and not by the height. You are in no way restricted either to specific default resolutions or the dimensions of certain devices, but you define for each website separately the different widths at which the site’s layout should be changed. These self-defined width details are also known as breakpoints.
The following practical procedure has been established:
Nowadays, many designers prefer the option based on the Mobile First principle. This means that they first develop a minimalist version of the layout exclusively for mobile devices, which they extend only later on (with breakpoints for min-width) for larger screens. But the downside with this procedure is that the desktop versions often appear as greatly magnified smartphone websites with huge fonts and sparse on content. In practice, the use of a combination of both principles has been established. We decide separately for each element which option — Desktop First or Mobile First — is better suited.
Here is a simple example of this. Your HTML document contains three
<article> elements that you want to place alongside each other
using float:left in CSS.
If you reduce the size of browser window, you will notice that at a width of around 800px the boxes become too narrow. You therefore decide that from this width onward the boxes will appear underneath each other rather than alongside each other.
The CSS code for the Desktop First approach could be as follows:
The Mobile First approach could be as follows:
You can see that, in this instance, the Desktop First version is slightly longer and more long-winded as the amended properties width:30% and float:left in the media queries need to be reset again to the default values auto and none. In this example, therefore, the Mobile First approach should be preferred.