Responsive Web Design
Helps to make your content work across any device. Browser vieports are measured in Device Independent pixels (DIPs) and not the hardware pixels which are the actual physical pixels. Device pixel ratio: ratio of DIP to hardware pixel eg: device pixel ratio of 2 means one DIP for every 2 hardware pixels. Font boosting: Browsers try to identify the main content and boost the font size to ensure readability when the veiwport meta tag is not set. CSS pixel = Hardware pixel / DPR Setting meta viewport: <meta name="viewport" content="width=device-width,initial-scale=1" /> Set max-width on elements: img, embed, object, video{ max-width: 100%;} Tap target sizes: give a minimum size of 40px * 40px ideally 48px * 48xp (min-width and min-height) to cover the size of a finger. Start from small - mobile first approach: keep the content widths to 100% Media Queries: 2 ways to include media queries: 1. have separate CSS files and link them using med...