Mar 28, 2014

What's the difference between using Px and Em in CSS Media Queries?

Most people at Media Queries to write up is often used a px right thing. But some people choose to use em units instead of why they are doing so using media queries to write em have their advantages, however. Let's find the answer together.

Introduction to Baseline Font Size

web browsers or anything that can display Web pages are assigned a default font size keep it up we will call it a baseline, because if we do not specify the size of the letters on them. It will use this value to display to us.
Typically, the baseline of the web browsers on the desktop is 16px on which we can go to preferences or options of web browsers, but in some devices to find that this value is not at 16px This is because the design of devices. Then you will see that the distance between the eyes of the user with a screen like this. Font size so it should be suitable for most applications it.
However, we often find that most web browsers have a function that will allow us to adjust the baseline is more convenient. A function to adjust font size (+ / - text size) to facilitate the users with vision problems. Or the user views a font size of that web site designed to not fit.

So come see what Em Px the difference?

Px (Pixels) is an absolute unit which is the unit that defines a fixed size. Do not depend on anyone else by 1 pixel is equal to one point on a display screen of the Em (M) reads, "M" is the unit-relative units are opposed to the traditional absolute match the size of it. not fixed It will be adapted to the element that is the Parent of it.
The exclusivity of em are placed on the em unit is born to typography in particular whether we use em on property whatever (font-size, line-height, width, height, margin, padding), its size will increase. with the "font-size" of the parent (container) if the parent does not always have to set the font size up. It will chase away the parent level rising at the highest level, which parent is the web browser itself or simply the baseline font size change anything if the given size using em would change accordingly.
To illustrate more clearly. Suppose we want to set the padding to the content for a one box if we define padding, using px as 10px time we use this function to adjust text size of the web browser to make it larger, we find that the font size is increased. While the size of the padding remains the same is 10px.
On the other hand, if we set the padding by using em instead 1em time we use this function to adjust text size of the web browser to make it larger, we find that the font size increases with the size of the padding on the rise. According to This is because Use this function to adjust text size of the web browser to bigger increases the baseline font size makes padding the original size of 1em to 16px is not the same size as 16px no longer assume we adjust the text size to 150% will. that our set at 1em padding to the size of 1x16x1.5 = 24px enough.
For more details about the Px and Em can read his blog at ". Em VS. Px VS. Percent: Font-Size using me to be nice? "

Most people write, using Media Queries Px.

Generally Web developers most want for yourself look good on all devices, he has the option to set breakpoints in writing, media queries, taking into account the screen size of devices such as 320px, 480px, 768px, 800px,. or 1024px no surprise that they are using media queries to write unit px (if you are not familiar with Breakpoints can read more at ". know Breakpoints in Responsive Web Design. ")

What happens if not equal Baseline Font Size 16px?

If anyone ever made responsive web design will be used to bring the web to test the devices right through it. But there are a few people test if the baseline font size is 16px no web presence, for example, if we turn the desktop part of the old woman. To determine the size of the font in the preferences 32px web, we will continue to output a reasonable right?
Let's see a good case study here. Suppose we had just done the first responsive web site, we look good, we want you to use the iPhone look and feel of the Web screen size 320px is.

320px

320px size are designed to be stacked navigation sorted from top to bottom. To the place it is most sort content stacked as well.
media_queries_320px

480px

480px size or iPhone4 as a horizontal navigation we decided to change from left to right instead. To save space As well as in the content, change the combination of 2 columns instead.
media_queries_480px

480px + Large Text Size

Now let's test with the baseline font size is 16px thread, let us not try to set font size in the preferences of the web browser as a function 32px or use the text size of the web browser offline.
When a larger text size very much, we will find our content not to read too much navigation ever arranged beautifully to the fall line description under the photo. I do not see a relationship with him up (to adjust the text size, but the size of the letters. See that's still the same size. Unlike a zoom that everything on the page is a large increase in the same ratio).
media_queries_480px_large_text_size

480px + Large Text Size + Media Queries with Em.

This problem was solved by changing the write media queries instead of using em units are the same as we write this.
If using media queries to write, let me take em breakpoint was always divided by 16 (not that it is the baseline font size whatever), we will have a breakpoint in em's thread.
media_queries_480px_large_text_size_with_em
After we changed the media queries using em instead of px, we will find that the content of our character, although it is much larger. But it's still a reasonable display. This is because it does not have to go to the first breakpoint Case of. Do not forget that we look at the viewport size 480px, but we've changed the breakpoint is 30em, which is 30 × 32 = 960px it means that the baseline font size is 32px, we will enter Case breakpoint first, when the viewport our size. on 960px

Then drawbacks of writing, using Media Queries Em are you?

The only downside is I write em using media queries is that sometimes we just want to make the font bigger. Not want the layouts changed in any way. This can be found less. We always meet with the seniors who are accustomed to traditional layouts do not want to learn anything new. But if we have designed layouts for each breakpoints provide "suitable for most applications", then this problem would not actually do it.
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)