From IT Skills
Jump to: navigation, search

vh[edit]

vh badly supported on iOS versions#7- workaround

Chrome keeps the same size for vw/vh-values when zoomed while Safari changes them.

absolute px, in, pt, or cm[edit]

1in is always *72pt*

If screen resolution is 96ppi then one px will be equal to one physical pixel

don't scale according to the width of the browser window

useful for precise font sizing, and for border widths

px is often confused with dp described as mdpi in Template:Resolution#Android. Here on site px means physical pixels, but dp means logical pixels.

relative[edit]

Pixel ratio is tuned by font-size in <html>, user zoomed in, user changed browser’s font setting.

%[edit]

relative to either the height or width of a parent element.

em[edit]

The em unit can be used to declare font-sizes. For most users (and browsers), a font-size of 100% would default to 16px unless they change the default font-size through their browser settings... Although this is possible, it’s often a bad idea to set font-size in the <html> to a pixel value because it overrides the user’s browser settings. Instead, you can either choose to use a percentage value, or leave out the font-size declaration entirely. font-size will be set to 100% if you left it out entirely.

it’s a best practice to use relative units like em for font-size, margin and padding...

rem[edit]

means Root EM. It’s built to provide some relief the em computational problem that many faced. It is a unit of typography equal to the root font-size. This means 1rem is always equal to the font-size defined in <html>... Some developers avoid rem entirely, claiming that using rem make their components less modular. Others use rem for everything, preferring the simplicity that rem provides... rem can cause duplication and super complex code... em unit is useful when you need to scale a property with it’s font-size. However, you’ll run into problems if you need to size the property accordingly to the root font-size

em-rem[edit]

em-rem together rules:

  1. Size in em if the property scales according to it’s font-size
  2. Size everything else in rem.

EM-REM example

EM-REM component example

em-rem-px im Media queries[edit]

em and rem units should not be affected by changes in font-size in the HTML since they’re based on the browser’s internal font-size property. Unfortunately, we didn’t get the perfect behavior on Safari... mobile Safari was affected as well... we shouldn’t use rem media queries... 2. User Zooms In... pixel based media queries is consistent between the browsers. But Safari is not consistent when using em/rem based media queries... 3. User Changed Their Browser’s Font Setting... em and rem, on the other hand, is based on the font-size of the browser. it’s a no-go for pixel based queries 😱😱😱...

There's another case where em breakpoints are very useful: Firefox allows you to zoom the text size only (which is pretty similar changing the minimum font size in the browser settings). Using breakpoints defined in px will miserably fail, whereas ems will work

how to fix issues related to Minimum Font Size browser settings. If the user sets the minimum font size to something higher than the expected 16px it can wreak havoc on a layout.

conclusion: use em and have problems on Safari(what about mobile Safari?) and do not use px that have problems with Font Setting and Firefox zoom