HTML Mobile
HTML Mobile plays well with Media Queries
HTML Screen Size
In 2004 a common screen resolution was 800x600 pixels. Typical web sites had a 760px fixed width.
In 2008 most computer screens had a 1024x768 resolution. Typical web sites had a 980px width.
Today, web browsers can run on everything from high-resolution screens (2560x1600) to small tablets and smart phones.
Viewport Media Tags
The viewport media tag is placed inside the <head> tag of a page:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
.
.
</head>
The meta tag above, allows a web page to be scaled up to the device with, when it is opened for the first time.
Media Queries
Media queries is placed inside the CSS file:
@media screen and (min-width: 200px) and (max-width: 400px) {
img { display: none; }
}
The media query above hides all images when screen with is between 200px and 400px.
The next chapter of this tutorial will demonstrate a responsive web page.
Media Queries
Media queries (@media) is the CSS solution to the screen size problem.
In a style sheet you can have different media queries like:
Example
@media screen {
p {
font-family : verdana,
sans-serif;
font-size : 12px;
}
}
@media print {
p {
font-family : garamond, serif;
font-size : 10px;
}
img {
display:none
}
}
The example above declares that paragraphs should be displayed differently on a screen than on a printer.
Another font-family and font-size should be used. In addition, images should not be printed on a printer.
Mobile and Tablets
For different screen resolutions, CSS allows us to add min-width and max-width:
Example
/* For smart phones */
@media screen and (max-width: 600px) {
}
/*
For tablets */
@media screen and
(min-width: 600px) and (max-width: 900px) {
}
/* For desktop
computers */
@media screen and (min-width: 900px) {
}
You can also use other parameters:
Example
/* Device dimensions */
@media screen and (max-device-height: 600px) {
}
/* Device orientation */
@media screen and
(orientation: portrait) {
}
/* Device aspect ratio */
@media screen and (device-aspect-ratio:
16/9) {
}
