Comments on: All your base, are belong to us — or what base size do em-based media queries use? http://blog.w3conversions.com/2015/03/all-your-base-are-belong-to-us-%e2%80%94-or-what-base-size-do-em-based-media-queries-use/ realizations on life, the web, and everything Mon, 16 Mar 2015 06:43:26 +0000 hourly 1 http://wordpress.org/?v=3.0.4 By: Stephanie Rewis http://blog.w3conversions.com/2015/03/all-your-base-are-belong-to-us-%e2%80%94-or-what-base-size-do-em-based-media-queries-use/comment-page-1/#comment-4951 Stephanie Rewis Mon, 16 Mar 2015 06:43:26 +0000 http://blog.w3conversions.com/?p=1056#comment-4951 @brothercake - Interesting thoughts... I'm currently making lots of plans and considering many options. As one does. ;) @Michael - In 15 years of development, I've never heard of a 12px browser — IE or otherwise. Do you have stats or a link for that information? @brothercake – Interesting thoughts… I’m currently making lots of plans and considering many options. As one does. ;)

@Michael – In 15 years of development, I’ve never heard of a 12px browser — IE or otherwise. Do you have stats or a link for that information?

]]> By: Michael http://blog.w3conversions.com/2015/03/all-your-base-are-belong-to-us-%e2%80%94-or-what-base-size-do-em-based-media-queries-use/comment-page-1/#comment-4950 Michael Sun, 15 Mar 2015 19:34:28 +0000 http://blog.w3conversions.com/?p=1056#comment-4950 I think some IE browsers are 12px? Pretty sure, so safe to define the base font I believe. I think some IE browsers are 12px? Pretty sure, so safe to define the base font I believe.

]]> By: Tweet Parade (no.11 Mar 2015) - Last Week's Best Articles | gonzoblog http://blog.w3conversions.com/2015/03/all-your-base-are-belong-to-us-%e2%80%94-or-what-base-size-do-em-based-media-queries-use/comment-page-1/#comment-4948 Tweet Parade (no.11 Mar 2015) - Last Week's Best Articles | gonzoblog Sat, 14 Mar 2015 14:02:26 +0000 http://blog.w3conversions.com/?p=1056#comment-4948 [...] All your base, are belong to us — or what base size do em-based media queries use? – The moral of the story is — your media queries, sized with em units, are going to be based on 16px per em unit — unless the browser’s font size has been changed by the user. You can not override the user’s wishes. [...] [...] All your base, are belong to us — or what base size do em-based media queries use? – The moral of the story is — your media queries, sized with em units, are going to be based on 16px per em unit — unless the browser’s font size has been changed by the user. You can not override the user’s wishes. [...]

]]> By: Em-based media queries are based on… | My Blog http://blog.w3conversions.com/2015/03/all-your-base-are-belong-to-us-%e2%80%94-or-what-base-size-do-em-based-media-queries-use/comment-page-1/#comment-4947 Em-based media queries are based on… | My Blog Sat, 14 Mar 2015 02:13:52 +0000 http://blog.w3conversions.com/?p=1056#comment-4947 [...] CSS-Tricks [...] [...] CSS-Tricks [...]

]]> By: brothercake http://blog.w3conversions.com/2015/03/all-your-base-are-belong-to-us-%e2%80%94-or-what-base-size-do-em-based-media-queries-use/comment-page-1/#comment-4944 brothercake Thu, 12 Mar 2015 22:59:39 +0000 http://blog.w3conversions.com/?p=1056#comment-4944 This is exactly the reason for using em breakpoints :-) RE: using flexible units for padding etc. -- I'm increasingly convinced that that's not a good idea. It creates a flexible layout that allows the whole thing to scale with text size, but I don't think that's a desirable outcome -- because although it may look nice, it's a waste of space. Users need to be able to scale text, but they don't need to be able to scale padding as well. Doing so increases pressure on the viewport -- the larger the text you need, the less space you potentially have to display it in (once you've reached the point where your browser is as big as your screen), and that means shorter line-lengths and more scrolling for the user. So maybe it's better to stick with px for padding etc -- it creates the base design you want at the default size, but allows it to change proportions to provide ever more relative space for larger text. This is exactly the reason for using em breakpoints :-)

RE: using flexible units for padding etc. — I’m increasingly convinced that that’s not a good idea. It creates a flexible layout that allows the whole thing to scale with text size, but I don’t think that’s a desirable outcome — because although it may look nice, it’s a waste of space.

Users need to be able to scale text, but they don’t need to be able to scale padding as well. Doing so increases pressure on the viewport — the larger the text you need, the less space you potentially have to display it in (once you’ve reached the point where your browser is as big as your screen), and that means shorter line-lengths and more scrolling for the user.

So maybe it’s better to stick with px for padding etc — it creates the base design you want at the default size, but allows it to change proportions to provide ever more relative space for larger text.

]]> By: Stephanie Rewis http://blog.w3conversions.com/2015/03/all-your-base-are-belong-to-us-%e2%80%94-or-what-base-size-do-em-based-media-queries-use/comment-page-1/#comment-4943 Stephanie Rewis Thu, 12 Mar 2015 20:44:01 +0000 http://blog.w3conversions.com/?p=1056#comment-4943 Thanks Lu, that's exactly what I found. I guess I'd just never thought about WHERE the em-based media queries were grabbing their base value from. And it makes total sense that it's outside the HTML. @wicek3d - rems don't work for media queries. I used to think that was a bug. But it makes total sense now, since rem units are based on the HTML element size, and media queries are computed from the user's base size (which is prior to the HTML element is involved). Thanks Lu, that’s exactly what I found. I guess I’d just never thought about WHERE the em-based media queries were grabbing their base value from. And it makes total sense that it’s outside the HTML.

@wicek3d – rems don’t work for media queries. I used to think that was a bug. But it makes total sense now, since rem units are based on the HTML element size, and media queries are computed from the user’s base size (which is prior to the HTML element is involved).

]]> By: Em-based media queries are based on… http://blog.w3conversions.com/2015/03/all-your-base-are-belong-to-us-%e2%80%94-or-what-base-size-do-em-based-media-queries-use/comment-page-1/#comment-4940 Em-based media queries are based on… Thu, 12 Mar 2015 10:08:55 +0000 http://blog.w3conversions.com/?p=1056#comment-4940 [...] …read more [...] [...] …read more [...]

]]> By: wicek3d http://blog.w3conversions.com/2015/03/all-your-base-are-belong-to-us-%e2%80%94-or-what-base-size-do-em-based-media-queries-use/comment-page-1/#comment-4939 wicek3d Thu, 12 Mar 2015 09:55:36 +0000 http://blog.w3conversions.com/?p=1056#comment-4939 Hey, thanks for this article. I'm unclear about using rem in media queries instead of em - how would that impact the website layout while zooming or changing the browser window? Hey, thanks for this article.

I’m unclear about using rem in media queries instead of em – how would that impact the website layout while zooming or changing the browser window?

]]> By: Lu Nelson http://blog.w3conversions.com/2015/03/all-your-base-are-belong-to-us-%e2%80%94-or-what-base-size-do-em-based-media-queries-use/comment-page-1/#comment-4938 Lu Nelson Thu, 12 Mar 2015 08:45:04 +0000 http://blog.w3conversions.com/?p=1056#comment-4938 It's not a disadvantage. EM units at the media-query level are not affected by html-scale because they refer to the medium: i.e. device-scale (outside the html). You can set html font-size in EMs too, which is logically consistent. User-set device-scale just means you can't assume a PX value for anything in your design unless you specifically size it in PX (and even then often not); and that best policy is to set html font-size in EM or %, which is relative to device-scale, and then set anything inside the html scope in REMs, which is relative to html-scale. This forms a relative-size chain: nothing breaks, user/device-scale can be anything, and HTML font-size can be anything, media queries always trigger where they should. It’s not a disadvantage. EM units at the media-query level are not affected by html-scale because they refer to the medium: i.e. device-scale (outside the html). You can set html font-size in EMs too, which is logically consistent. User-set device-scale just means you can’t assume a PX value for anything in your design unless you specifically size it in PX (and even then often not); and that best policy is to set html font-size in EM or %, which is relative to device-scale, and then set anything inside the html scope in REMs, which is relative to html-scale. This forms a relative-size chain: nothing breaks, user/device-scale can be anything, and HTML font-size can be anything, media queries always trigger where they should.

]]> By: Em-based media queries are based on… - A Geek's View http://blog.w3conversions.com/2015/03/all-your-base-are-belong-to-us-%e2%80%94-or-what-base-size-do-em-based-media-queries-use/comment-page-1/#comment-4936 Em-based media queries are based on… - A Geek's View Wed, 11 Mar 2015 23:44:21 +0000 http://blog.w3conversions.com/?p=1056#comment-4936 [...] Direct Link to Article — Permalink [...] [...] Direct Link to Article — Permalink [...]

]]>