Why I don't prefer and don't recommend the use of CSS media query min-width
CSS media query @media only screen and (max-width: *px) {} is used to apply different stylings for various screen sizes/resolutions
They are easy to use by positioning the above code with the right styling inside, anywhere on a css file.
Different stylings can be applied for screens smaller then a specific resolution by using the max-width: property, for screens bigger than a specific resolution with min-width: and for intervals of screen sizes (and this is sometime used for fixing screen for certain devices) with @media only screen and (max-width: 9600px) and (min-width: 1200px) {}
From my experience you should only use the max-width property, and let me tell you why:
Mobile first concept
Definition
Mobile first concept, from my point of view means that a website is build at it’s best to be optimised for mobile view (and this will include the way it looks and the size of the site when is downloaded – that is reflecting in download speed)
A while ago and some companied that takes this part very in serious are still doing that, the mobile version of a website will be part of a subdomain. Th reason for that is to allow to use of specific HTML, CSS and JS code optimised and reduced in size and functionality sometimes, for mobile devices.
I believe this is still the best way a webpage can be build for mobile devices.
The problem is that since we also have tablets, that can have the resolution of a laptop, this will not show a mobile version of a website but a desktop view. A tablet will still use wireless of Network internet to download a website so optimisation will still be needed but in this case it has to include all the desktop functionality.
Probably because f the above reason, in the last year, the mobile version on a a subdomain started to be less used.
Many companies have the concept of Mobile first, but from my experience this concept was not correctly understood by some developers.
By “mobile first” some developers believe that is the way the CSS is build with media queries that are defining small screens at the beginning of the CSS file and desktop styling under a min-width property.
It is important to mention that a CSS file will download all in once and once is downloaded it will show the CSS across the whole page (this is happening when the mobile version is on the same domain – not on a subdomain – of a website)
So, placing all the mobile styling at first and desktop under a min-width rule is just not wise and is complicated the life of any developer is working on this website, including the initial one.
This is because a developer will never use a mobile for writing the code. The code will be written from a desktop. And once a desktop is used for that, I strongly believe that the first CSS that will execute have to be (for easiness) for desktop. Remember, as I said above, that all the CSS is downloaded in one time and applied to the page in the same time once downloaded.
min-width and max-width used together should be used only in exceptional cases and not as a normal process.
Since I believe that the first CSS should be for desktop, the easies and the only things to do for tables and mobile resolutions is to add media queries only as max-width for different screen sizes.
And this process should be by simply overwriting the styling applied for larger screens. In this way the CSS will be as small in size as possible. As an example, you can have
.header {
height: 50px;
@media only screen and (max-width: 1200px) {
height: 30px;
}
@media only screen and (max-width: 9600px) {
height: 20px;
}
}Things can get a lot more complicated on a website and from my experience the most easies CSS to follow is the one that is not going back and forward on resolution, but is following the above example.
Many times the above styling can be overwritten by some developers by adding the bellow styling
@media only screen and (max-width: 9600px) and (min-width: 1200px){
.header {
height: 25px;
}
}and this will destroy all the above logic.
For this reason is best to follow the logic from top (large screens) to bottom (small screens) and if you need to change a styling for the 1200-960 interval, then change what is under max-width:1200 one first and then add a new rule for under max-width: 960 if needed. I know that is adding extra work because you don’t only need to check the interval you are editing, but you will also need to check if nothing is broken for under 960px too. By doing it in this way it will be more easy for you to understand the code later by looking to the screen and the CSS applied, and by anyone else it will work on the same code later.
If it will be to work the other way adding the mobile styling first and overwriting it with the desktop one later with the min-width properties , you will find that your CSS will be much larger under this media queries because on desktop a site will always have more complex styling, being larger.
Along with how to use media queries in the right way I think is very important to know how to do responsive websites in the right way and this will involve the use of percentages for width and not pixels, to fit a site from left to right on al the resolutions and also leave the elements as the .header from the above code example to get its height from the elements inside.
For example a .logo will always exist inside the .header, and the logo will definitely need a height defined (being an image the height on the image will also be needed from the SEO perspective). Once the logo will float left it will also give a height to the header. On smaller screens, all you will need to overwrite is the logo height. From 20px to 15px lets say. If the logo has a margin or a padding it will also apply to the header height. And this will be the only difference that will also involve a reduced header height. For this part you can read the next article.