Return to Kroll Design home page

Responsive Design

« Return

See also:

initial-scale: I coded an html email at work to be responsive, and it works well, but the 'view in browser' version, whose code is identical to the email save for the fact that it obviously has no 'view in browser' link itself, this online version is not responsive -- it shows the entire email way zoomed out, as if I hadn't added any media queries. I added the following line of code to the <head> of the html, and this fixed it to be responsive:

<meta name='viewport' content='width=device-width, initial-scale=1'>

redefining font sizes based on device: if you define a pixel font size once and ONLY once, in the CSS rule for the body tag, and define all other font sizes (for h1, h2, h3 etc) using em instead of px, the em font sizes will be based on that px base font size. This is good for use in responsive design because you can use media queries to specify the base font size for desktop, tablet, and cell phone sizes. You don't need to re-specify dozens of different text CSS rules in the media queries, because their having been defined using em will automatically resize them based on the 1 base font size in px mentioned in the media query. See these two pages, how the h1 h2 h3 em-based styling is directly affected by the base font size:

Effect of 16px base font size on the h1, h2, h3

Effect of 12px base font size on the h1, h2, h3


« Return

©2012 Kroll Design    781.910.3694
Last modified: 10/5/2021 4:09 AM