January 30, 2024 by admin
HTML/CSS Reference for DMET 155/355
Media Queries
@media at-rules, used to target styles at specific media, such as screen or print, have already been covered. But this can be pushed to an even greater level of sophistication, enabling you to specify different design choices depending on screen size. A page can then be optimized and laid out completely differently for mobile phones, tablets, and varying browser window sizes.
To recap, if we want to apply some CSS solely to screen-based media, for example, one option would be to slot something like the following in at the bottom of a stylesheet:
@media screen {
body { font: 12px arial, sans-serif }
#nav { display: block }
}
Browser-size specific CSS
To extend the previous example, not only can screen-based media be targeted, screen-based media of a certain size can be targeted as well:
@media screen and (max-width: 1000px) {
#content { width: 100% }
}
This tells a browser to apply a block of CSS when its viewport is 1000 pixels wide or less. You could use this to do something as simple as making a content area or navigation narrower or completely re-arrange a page layout (like stacking page sections on top of one another instead of displaying them in columns).
You can apply more than one @media rule, so you could have a number of different designs that are browser-size-dependent:
@media screen and (max-width: 1000px) {
#content { width: 100% }
}
@media screen and (max-width: 800px) {
#nav { float: none }
}
@media screen and (max-width: 600px) {
#content aside {
float: none;
display: block;
}
}
Note that if, for example, a layout area was 600 pixels wide or less, all three of these would be applied (because it would be less than or equal to 1000px, 800px, and 600px).
As well as using a general max-width on the main content area (the article elements), this site also has a number of size-dependent CSS rules.
You could also use “min-width” instead of “max-width” if you want to do things the other way around and apply CSS to sizes equal to or over a certain length.
Orientation-specific CSS
If you have a hankering for applying CSS depending on the orientation of the browser, fill your boots with something like the following:
@media screen and (orientation: landscape) {
#nav { float: left }
}
@media screen and (orientation: portrait) {
#nav { float: none }
}
This could be especially useful with mobile devices…
Device-specific CSS
We’re not talking different CSS for each and every brand and model of laptop, phone, and donkey – that would be sinful – but we can, with a relatively clear conscience (as long as we’re sensible), specify the likes of the device’s screen dimensions and its pixel ratio.
A “handheld” media type does exist and it could be used as @media handheld… but it isn’t widely supported and the distinction of what is “handheld” has become blurred due to the proliferation of all manner of devices with all manner of screen sizes.
Width and height
device-width, device-height, min-device-width, max-device-width, min-device-height and max-device-height can be used to target the computed resolution of a device:
@media screen and (min-device-height: 768px) and (max-device-width: 1024px) {
/* You can apply numerous conditions separated by "and" */
}
Pixel ratio
It’s important to keep in mind that a CSS pixel need not be the same as a physical pixel. While a screen may physically be 720 pixels wide, a browser may actually apply CSS assuming that it is 480 pixels wide, for example. This is so that a standard designed web page will more likely fit on the screen. In this example, there is a pixel ratio of 1.5:1: There are 1½ physical pixels to every CSS pixel. A standard desktop monitor will have a pixel ratio of 1:1: One CSS pixel to every physical pixel.
If you want to apply styles only to these devices, you can use something like:
@media (device-pixel-ratio: 2) {
body { background: url(twiceasbig.png) }
}
This would apply to the likes of the iPhone (4 and above), with a pixel ratio of 2:1. You can also use min-device-pixel-ratio and max-device-pixel-ratio.
Talking of iPhones, you know the deal: also use -webkit-device-pixel-ratio, etc, etc…
You might also want to fiddle with a device’s viewport to get it to play how you want. Leaping back over to HTML, the following meta element will force a device to render a page at the width of the viewport (rather than attempting to show a wider-width design and zooming out, which it will do by default if the page can be wider than the viewport’s width) and also prevent the user from zooming in and out:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
The benefit of this is that you can control exactly what is applied to what physical screen size. And although it’s painful to remove user controls, if the design is delightfully swell and made just for that diddy little screen, there shouldn’t be a need to zoom.
Others
You can also apply styles depending on a device’s resolution:
@media screen and (resolution: 326dpi) { /* */ }
@media screen and (min-resolution: 96dpi) { /* */ }
Or on its aspect ratio:
@media screen and (device-aspect-ratio: 16/9) { /* */ }From: https://www.htmldog.com/
[/read]