The ideal line length is about 15 words, apparently.
At 16px – which is about default for web browsers – that’s about 40em
If we define the max-width as 40em and the min-width as say 15em, the line lengths are 15 and 8 words respecitvely.
body {
font-size:100%;
min-width:15em;
max-width:40em;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at est at mauris interdum pulvinar.
Smaller Windows
On smaller screens, we can target a max-width of 40em and bump the text size up a bit. I’m guessing that shorter line lengths are preferable when reading on a small screen.
@media (max-width: 40em) {
body {
font-size:125%;
}
}
Bigger Windows
People with bigger screens are probably going to be sat a little further away. Lets increase the text size a bit. By doing so, we need to increase the width of the page so that the line length is around 15 words again.
@media (min-width: 60em) {
body {
font-size:125%;
min-width:15em;
max-width:45em;
}
}
Images
Image scaling is easy: max-width:100%;.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.