Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

README: warning about base font size and relative media queries #132

Closed
wants to merge 1 commit into from

1 participant

@pdaoust

Here's an edit to the README to warn people about using relative media queries and base font sizes other than 100% or 1em, as per issue 128. I also discovered that the same issue crops up when you put a non-100% font size on the <body> element as well, so I'm suggesting that people apply a base font size to their #container element.

@pdaoust pdaoust closed this
@pdaoust

Scratch this; I've written a patch to get the proper em size for calculating media queries. I'll submit a pull request in a few moments.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jun 15, 2012
  1. @pdaoust
This page is out of date. Refresh to see the latest.
Showing with 3 additions and 1 deletion.
  1. +3 −1 README.md
View
4 README.md
@@ -74,7 +74,9 @@ Some notes to keep in mind:
- Reportedly, if CSS files are encoded in UTF-8 with Byte-Order-Mark (BOM), they will not work with Respond.js in IE7 or IE8. Noted in issue #97
-- WARNING: Including @font-face rules inside a media query will cause IE7 and IE8 to hang during load. To work around this, place @font-face rules in the wide open, as a sibling to other media queries.
+- WARNING: Including @font-face rules inside a media query will cause IE7 and IE8 to hang during load. To work around this, place @font-face rules in the wide open, as a sibling to other media queries.
+
+- If you are using relative (em-baesd) media queries, remember that Respond.js calculates the size of one em based on the root (`<html>`) element's font size, whereas browsers with built-in media query support base it on the user agent's stylesheets. Therefore, if you wish to use relative media queries _and_ set a base font size other than 100%, set it on your `#container` element rather than the `<html>` or `<body>` element.
How's it work?
Something went wrong with that request. Please try again.