ptg16476052450 LESSON 16: Using Responsive Web Design
more useful for mobile customers than for desktop customers? For example, a restaurant
website will want to show mobile customers their address right away, as someone brows-
ing on his phone is probably looking for a place to eat lunch.
But remember that mobile customers are the same people whether they are on their phone
or their laptop. If you have your menu on your website for computer browsers, it should
be available for mobile browsers as well. You don’t want to limit your customers; you
just want to make what they typically want to do as easy as possible.Writing Media Queries
Media queries are what most people think of when they think of RWD. A CSS media
query is a logical expression that is either true or false. If the expression evaluates as
true, the browser should use that CSS, and if it evaluates as false, it should not. They
are called media queries because they originally checked the media type of the device
viewing the page. Media types were introduced in CSS2, and they were used to check
whether a device was a screen or if it was print, among other things. CSS3 introduced
media queries, and they got more sophisticated allowing designers to check things like
device width, aspect ratio, resolution and even if a screen was a Retina display or not.Media Types
There are 10 media types you can test for with CSS media queries:
n all—All media
n braille—Braille and tactile feedback devices
n embossed—Paged Braille printers
n handheld—Small-screen, low-bandwidth handheld devices
n print—Paged media and documents in print preview mode
n projection—Projected presentations
n screen—Color computer screens
n speech—Speech synthesizers
n tty—Teletypes and media with a fixed-pitch character grid
n tv—TelevisionYou can set the media type with the media attribute on the <style> tag:
<style media="print">