Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Basic Introduction to Simple Responsive Design With Code

In the early days of computers the most popular screen resolution was 640 x 480 pixels. Designers couldn't provide much of a Web page experience with that tiny screen size. Gradually computer display screens grew larger, and designers were free to be more creative. Then came mobile devices.

Today many Web sites are accessed more often by mobile tablets or smart phones than by personal computers. And there is a whole range of mobile devices out there with a wide range of screen aspect ratios and resolutions. It's sad that we now have to revert back to designing for small, even tiny screens. But the growth in users accessing the Web with mobile devices makes that market impossible to ignore.

To help us respond to the problem of designing for a wide range of screen sizes, CSS3 (Cascading Style Sheets version 3) has provided us with the Media Query. One of the most important tools in responsive design is the media query. The format of a media query is shown below.

@media media_type and (expressions) { style code }

After the keyword media is the media type, which is almost always going to be Screen, although it can also be print for printers, speech for screen readers, or all for all media types.

After the media type is an expression (or expressions). An expression is a statement like (min-width: 480px). When the Web browser comes upon the media query, it responds with the requested media type's specifications, and the query's expressions will be logically tested against those specifications returning a true of false result.

@media screen and (width: 250px) { style code }

The media query above will be true if the device has a screen width of 250 pixels. If the media query result is true, then the styles listed will be applied.

@media screen and (min-width: 480px) and (max-width: 640px) { font-size:16px; }

The media query above will be true if the device has a screen width between 480 pixels and 640 pixels. Then the font-size style will be applied.

The properties listed in the expressions are called media features, and besides width some of the other features you can test against are height, resolution, aspect-ratio, and orientation (portrait or landscape).

Before we go any further, it's important to mention that HTML version 5 also introduced a tool to help web designers with reponsive design, the viewport <meta> tag.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

When placed in the <head> section of your Web page, the viewport meta tag shown above will force the browser to report its width as the device-width and to set its initial-scale to 1.0 (no zoom).

<meta name="viewport" content="initial-scale=1, user-scalable=no">

The viewport meta tag shown above will force the browser to set its initial-scale to 1.0 (no zoom) and prevent the user from using zoom. Not really a good idea.

The important thing about the viewport meta tag is that if you don't provide one, the mobile device browser will ignore your media query and either set itself to a default setting or analyze your Web page code and try to adjust its setting for the best view.

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2023 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268