

Using media queries gives you more control so you can adjust the text size, colors, and positioning of elements based on the space you have on the screen. If you don’t use media queries to target your CSS, the iPhone and iPad automatically adjust your designs for you, shrinking or enlarging the page to best fit the screen (and like most automated results, resizing results in less than ideal results. The ability to target devices in CSS makes it possible to use different style sheets for different types of displays: desktop and laptop monitors, iPad-size screens, or iPhone-size screens. Today, web sites are viewed on giant desktop monitors and tiny mobile displays which is why media queries are so much more important - because they give us the ability to target styles based the size of the screen area or the aspect ratio (you can target portrait and landscape views by targeting their relative widths, which is especially useful when you’re designing for the iPhone and iPad).

Targeting iPhones, iPads, and other Computer Screens When you design web pages with CSS, you can create multiple collections of style designed specifically for each device, and you can target those styles using media queries set to a specific browser width.ĬSS has included the ability to use media queries since before version 3, but in the past, media queries were primarily used to target style sheets based on options, such as whether the page would be printed or displayed on a computer. The latest trend in web design requires creating one HTML page and then designing multiple style sheets to change the display based on the size of the screen where the page is viewed. Using CSS Media Queries you can change the design of a web page to display differently on an iPad than on an iPhone.
