Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Mastering PhoneGap Mobile Application Development

You're reading from   Mastering PhoneGap Mobile Application Development Take your PhoneGap experience to the next level and create engaging real-world applications

Arrow left icon
Product type Paperback
Published in Feb 2016
Publisher
ISBN-13 9781783288434
Length 392 pages
Edition 1st Edition
Languages
Arrow right icon
Author (1):
Arrow left icon
Kerri Shotts Kerri Shotts
Author Profile Icon Kerri Shotts
Kerri Shotts
Arrow right icon
View More author details
Toc

Table of Contents (14) Chapters Close

Preface 1. Task Automation FREE CHAPTER 2. ECMAScript 2015 and Browserify 3. Sassy CSS 4. More Responsive Design 5. Hybrid Application Accessibility 6. Testing and UI Automation 7. IndexedDB 8. Web SQL Database 9. Transferring Files 10. Performance 11. Graphical Assets 12. Deployment Index

Media queries


Media queries are exceptionally powerful constructs that allow us to build responsive layouts based on the properties of the device on which our code is running. For example, we can change the styling of various elements based upon the width or height of the screen or the pixel density. Alternatively, we could detect various device capabilities, such as color depth, or we could determine whether we're working with a screen or a printer. In this section, however, we're going to focus on how to detect screen size and pixel density.

Media queries can be defined using CSS @import rules, style sheet links, and @media rules. We'll focus on the latter, since it is of the typical form.

A media query often looks as follows:

@media only screen and (max-width: 768px) and 
(max-resolution: 2dppx) {
  /* some CSS rules that apply when this query is true */
}

The syntax is fairly flexible and you can probably already guess what the preceding rule does. But let's go over how you can craft media...

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Banner background image