Is it possible via media query to set styles for screens with a diagonal less than 7 inches? If so, how?

  • one
    Better use breakpoints in pixels. In the bootstrap this is well done - 480, 768, 992 ... - inferusvv

1 answer 1

Since today different devices have a different number of pixels per inch, respectively, on two devices with the same size, the screen can be displayed differently. For example, on old Macbooks with a diagonal of 13 inches, the screen resolution is 1280 by 800 pixels. On the same computers in recent years, the resolution is 2560 by 1440 (I will not describe how you can make it not scale'n).

Without knowing your task, I can be sure that you should use media queries to set breakpoints using the screen size in pixels. This approach is used by all modern css frameworks (bootstrap, material design lite, yaml: 4, semantic-ui) and it is considered good practice.

As an alternative, you can also use the measure em length as the zurb foundation and purecss do.