Hysen Labspropotional-mqs
A simple set of proportional media queries for responsive web design.
Proportional media queries for a fluid web
A small set of CSS media queries built on the idea that if font sizes use relative units, viewport targeting should too, converting pixel breakpoints into em values.
Why relative units for the viewport
The project's premise is that responsive web design is supposed to be fluid, using relative measurements, and that using pixels for media queries gets cumbersome. The README reasons from existing practice: since it is standard to use relative units like ems, rems, and percentages for font sizing, why not use the same kind of relative units to target viewport width. That is the idea the snippets put into practice.
Converting pixels to em
The README applies the standard font sizing formula, 100 percent equals 16 pixels equals 1 em, to viewport widths. The conversions are listed directly: 240px to 15em, 320px to 20em, 480px to 30em, 600px to 37.5em, 768px to 48em, 800px to 50em, 960px to 60em, 1024px to 64em, 1200px to 75em, and 1400px to 87.5em, with a note to keep targeting larger screens like TVs. The result is ready-made em breakpoints.
Density queries for high resolution screens
High resolution displays make it standard practice to serve device and screen specific CSS based on resolution and pixel density. The README gives an example query using a minimum resolution of 192dpi and a webkit minimum device pixel ratio of 2, then lists common ratios to target: 3, 2, 1.5, 1.3, and 1.25. Combining viewport width and pixel density is presented as the path to responsive and adaptive development.
The snippets and what else you can query
The CSS file holds a series of snippets ready to reuse, and the README reminds you to chain queries together for complex cases that target multiple screen sizes and densities. A closing list rounds up the other media attributes you can query: width, device-width, height, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid, and the Level 4 checks for script, pointer, hover, and luminosity.
Editorial conclusion
The README is a short argument for measuring viewports in em rather than pixels, with ready-made conversion values and density queries for retina-class displays. It reads more like a note to fellow developers than a formal specification.
Community notes