FASTFOOD: Use relative font-sizing for responsive web design

When developing with Responsive web design (RWD), you should use these CSS3 feature

  • reset padding, margin of body and container element. Set max-width to have no horizontal scrollbar.
  • set font-size for your body
  • use relative font-sizing unit
    • VERY IMPORTANT: use rem (relative to root element). Note: em is relative to parent element, so it is difficult to debug sizes on complex pages. With rem, we are always have font-size-relate-to root (e.g.: your body)
    • use vh, vw, vmin for sizing your box
    • 1vw is 1% of the viewport width, 100vw = 100% viewport width
    • 1vh is 1% of the viewport height, 100vh = 100% viewport height
    • 1vmin is the smallest of 1vw and 1vh

See more here

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s