# Proportional Media Queries: A Small CSS Utility for Em-Based Breakpoints > This repository offers a set of CSS snippets that convert pixel viewport widths to em units, aiming to make responsive breakpoints as fluid as font sizing. The project is minimal, dated, and useful mainly as a reference for developers who prefer relative units. **johannaruiz/propotional-mqs** — A simple set of proportional media queries for responsive web design. - Repository: https://github.com/johannaruiz/propotional-mqs - Stars: 100 · Forks: 5 - Language: Unknown - License: not declared - Published: 2026-08-17 · Updated: 2026-08-18 · Language: en - Canonical page: https://hysenlabs.com/projects/johannaruiz-propotional-mqs ## What This Project Actually Provides The repository is a set of CSS snippets, not a framework or a build tool. The README describes proportional media queries, which replace pixel-based breakpoints with em units. The author argues that if responsive design is meant to be fluid, then media queries should follow the same relative measurement logic used for font sizing. The core deliverable is a list of common viewport widths converted to em, assuming 16px equals 1em. For example, 320px becomes 20em, 768px becomes 48em, and 1200px becomes 75em. There is also a section for pixel-density queries, listing common device pixel ratios and resolutions. The project is not a package; it is a collection of ready-to-use snippets. The README mentions an SCSS version that was started on June 17, 2013, but no further details are given. ## The Mechanism: Em-Based Breakpoints and Pixel Density The mechanism is straightforward: instead of writing @media (min-width: 768px), you write @media (min-width: 48em). The conversion relies on the CSS standard that 1em equals 16px by default. The README gives a formula: 100% = 16px = 1em = 14pt. The same principle is applied to viewport width. This approach has a subtle effect: if a user changes their browser's default font size, em-based breakpoints will shift accordingly. That can be intentional for accessibility or a source of unexpected layout changes. The project also includes examples for targeting high-resolution displays using min-resolution and -webkit-min-device-pixel-ratio. The author lists pixel ratios like 2, 1.5, and 1.3, and resolutions like 192dpi and 144dpi. The snippets are meant to be chained together to create complex queries, though the README does not provide a full example of such a chain. ## How to Get It Running: Copy-Paste, Not Install There is no installation command, no package manifest, and no build step. The repository likely contains a CSS file with the snippets, but the README does not specify the file name or structure. To use it, you would clone or download the repository, open the CSS file, and copy the relevant media query blocks into your own stylesheet. The README says, 'In the css file, I've created a series of snippets, ready to use for your next responsive development endeavor.' That is the extent of the usage instructions. There is no mention of a license, so you cannot assume you are free to use it without permission. The SCSS version is mentioned but not described in terms of how to compile or include it. In practice, you are on your own to integrate the snippets into your workflow. ## Limitations and Failure Modes The biggest limitation is that this project is frozen in time. The last documented update is from 2013, and the repository may have no recent commits. That means it does not address modern CSS features like container queries, which offer a different way to handle responsive design. It also does not include any documentation on browser support for min-resolution or the various media features listed, such as script, pointer, hover, and luminosity, which the README itself flags as needing Level 4 support checks. Another failure mode is the assumption that 16px equals 1em. If a user has a different default font size, or if you set a different root font size on the html element, the em values will not correspond to the intended pixel widths. The README does not warn about this. It also does not provide any fallback for browsers that do not support em in media queries, though that is rarely an issue today. Finally, the project offers no tests, no examples of complex chained queries, and no guidance on how to combine width and resolution queries in a single media condition. ## Alternatives: Container Queries and Modern CSS A real alternative is to use container queries, which are now supported in modern browsers. Container queries allow you to style elements based on the size of their containing element, not the viewport. That is a fundamentally different approach: instead of adjusting the whole page layout at specific viewport widths, you can adjust individual components based on their available space. This solves a problem that em-based breakpoints cannot: when a component is placed in a narrow sidebar, it can change its layout independently of the viewport. Another alternative is to use pixel-based media queries, which are simpler and more predictable. The author of this project argues that pixels are 'cumbersome,' but they are also explicit and do not depend on the user's font size. If you want to stay with relative units, you could use rem instead of em, but the same caveat about root font size applies. The project does not mention any of these alternatives, so you have to evaluate them yourself. ## Maintenance and Upgrade Cost The maintenance cost is effectively zero because there is nothing to maintain. You copy the snippets and forget about the repository. However, that also means there is no ongoing support, no updates, and no community to answer questions. The README mentions an SCSS version that was started, but it is unclear if that was ever finished or published. If you rely on this project, you are relying on a static snapshot from 2013. The license is unknown, which is a legal risk if you plan to use the snippets in a commercial product. Without a license, you technically have no permission to use the code, even if it is publicly visible on GitHub. You should either contact the author for permission or treat the snippets as inspiration and write your own versions. The upgrade cost is also high if you ever decide to move to a more modern approach, because you would need to rewrite your media queries entirely. ## Who Should Use This and What to Verify This project is for developers who are comfortable with copy-paste code and who want a quick reference for em conversions. It is not for teams that need a maintained library or that require documented browser support. Before you use any snippet, verify the em values against your own base font size. If your design uses a root font size other than 16px, the conversions will be off. Also, test on actual devices to see how the breakpoints behave when users change their browser zoom or default font size. The README suggests chaining queries, but it does not give a concrete example, so you should test any complex query in a real browser. Finally, check the repository's commit history and license before assuming it is safe to use. The project may be archived, though the description says it is not, but the lack of recent releases is a sign that it is dormant. ## Conclusion Adopt this if you want a quick copy-paste reference for em-based breakpoints and pixel-density queries, and you are comfortable with a project that has not been updated since 2013. Do not adopt it if you need an actively maintained library or if your team relies on modern CSS features like container queries. Before using, verify the em values against your own base font size, since the snippets assume 16px equals 1em, and test on actual devices to confirm behavior. ## FAQ ### What em value do these proportional media queries give for a 768px viewport? 48em. The list maps each pixel width divided by 16, running from 240px = 15em through 320px = 20em, 480px = 30em, 600px = 37.5em, 768px = 48em, 800px = 50em, 960px = 60em, 1024px = 64em, 1200px = 75em, and 1400px = 87.5em. ### How do I write a high density media query with these proportional media queries? Combine a resolution and a device pixel ratio in one comma separated list, for example @media(min-resolution : 192dpi), (-webkit-min-device-pixel-ratio: 2). The comma means either feature satisfies the query. ### Which device pixel ratios should I target? The listed ratios are 3, 2, 1.5, 1.3, and 1.25. The listed resolutions to target, using dpi or dpcm, are 300 dpi, 244 dpi, 192 dpi, 144 dpi, 124.8 dpi, and 120 dpi. ### Which media features need a Level 4 support check? Four of them are marked that way: script, pointer, hover, and luminosity. The rest, including width, device-width, height, orientation, aspect-ratio, resolution, and grid, are listed without that qualification. ### Does the Propotional-MQS repository include an SCSS version? It has both a css/ and an scss/ directory, and an update note dated 6/17/13 says an SCSS version has been started. The last push to master is dated 2013-06-19 and there are no releases. ## Sources - [Official README](https://github.com/johannaruiz/propotional-mqs#readme) - [Project repository](https://github.com/johannaruiz/propotional-mqs) - [README](https://github.com/johannaruiz/propotional-mqs/blob/master/README.md) - [Releases](https://github.com/johannaruiz/propotional-mqs/releases) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/johannaruiz-propotional-mqs