Join Joseph Lowery for an in-depth discussion in this video Understanding media queries, part of Building Mobile Sites with Dreamweaver and WordPress.
There's an ever-growing proliferation of internet capable devices, with an almost…dizzying variety in screen sizes, and resolution, and Web designers everywhere…owe a debt of gratitude to the W3C working group, who developed the media query…specification for CSS3.…A media query allows specific CSS rules, or external style sheets, to be…applied conditionally.…You can, for example, start with a basic Desktop design, and then use one set of…CSS rules if the width of the display screen is at a minimum 768 pixels, like an…iPad or other tablet, and another, if the screen is at least 320 pixels, like an…iPhone or Android device.…
In fact, you can have as many CSS style sheets for as many different screen…sizes as you can handle.…So what does the media query code look like?…Well, if you're incorporating entirely different external style sheets, it's a…link tag with an enhanced media attribute.…Here's the code to pull in a style sheet for a standard tablet.…Note the min-width and max-width named value pairs within the media attribute.…
- Setting up an existing WordPress site
- Targeting configurable site elements
- Setting up media queries
- Preparing for adaptive images
- Styling a blog for tablets
- Restructuring navigation for different-sized displays
- Developing a WordPress site for phones
Skill Level Intermediate
Dreamweaver and WordPress: Core Conceptswith Joseph Lowery5h 44m Intermediate
WordPress Themes: Photography Portfolioswith Morten Rand-Hendriksen53m 2s Intermediate
1. Preparing Your Site to Go Mobile
Understanding media queries3m 50s
2. Retrofitting for Multiple Screens
3. Implementing a Full Mobile Redesign Strategy
4. Styling a Blog for Tablets
5. Developing a WordPress Site for Phones
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.