Hi! I've been reading about media queries in www.w3schools.com and then thinking about the screen sizes of mobile phones, tablets, laptops and desktops.
As you can see in webpages like http://screensiz.es/ the width of a Huawei Nexus 6p (mobile phone) is 1440px, while the width of a Lenovo Thinkpad X230 (laptop) is 1366px. This means that the number of pixels of a screen doesn't tell us its real size and, therefore, I don't think it makes sense to create media queries in px, like the following example from www.w3schools.com:
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
I think it would be better to write the above media query as follows (I think 14 cm is the maximum width you can find in mobile phone screens today):
@media only screen and (max-width: 14cm) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
Maybe I'm making a mistake, I don't know...
Could anybody help? Thank you, Marcos.