When creating a Web site, we must be sure that anybody on any device can use it efficiently and easily. How many times have you gone to site on your phone or tablet and found a site difficult to read or navigate, because of the screen size. This chapter will show how to use media queries to make the same page, with the same CSS file, work for multiple devices. There techniques will also allow for people with visual and other limitations to fully use your site.
Learning Outcomes for this Chapter
Upon completion of the reading of this chapter and assignments found at the end, a student should be able to:
- explain the need for different display of pages on different devices,
- recall the four standard types of devices used in media queries,
- create media rules for the four standard types of devices,
- create media rules, that use the device’s width, to display a page on many different screens,
- recall the approximate width, in pixels, of common screened devices.