0

I'm not a designer but just know enough to tweak around with css.

I need to implement media queries on top of existing css design for a project to adapt it for mobile devices like iphone, android etc. etc.

How much time it may take me to know enough to add media queries support to the existing design?

Please don't close the question, it's a specific answer that i'm seeking as it would potentially save me wasting time on learning something that may not solve my purpose at the moment.

user481913
  • 1,022
  • 1
  • 13
  • 36
  • 1
    You can learn it in 10 minutes. Media Queries are not very hard to grasp. This isn't however a question you should ask here. – Madara's Ghost Nov 29 '11 at 06:37
  • 2
    How can anyone tell you how much time *you* will need to learn something? Media queries really aren't complicated, but how long it'll take you to learn and implement them for your project depends on you and your project. – deceze Nov 29 '11 at 06:37
  • Hi, Thanks for answering. Curent design is a fluid layout with just 1 css file that's applied site wide ... i am not looking to be an expert at media queries but just know enough to add/modify to this css file to make it work for mobile devices – user481913 Nov 29 '11 at 07:13
  • Adapting an existing design will probably be difficult and frustrating. The base design ideally is laid out in a flexible grid to start with. – steveax Nov 29 '11 at 07:30
  • @steveax - i'm not sure about what is reffered to as fexible grid but it's basically a 2 col layout at the moment with col 1 for main content - 75% , col2 -sidebar 25% and top header 100% , footer 100% and some css applied to inner pages that load inside main content area – user481913 Nov 29 '11 at 08:01

1 Answers1

0

Yes, you can. There really isn’t much to learn about media queries.

  1. They let you say “apply this CSS if the browser meets these criteria (and supports media queries)”.

    So, you can apply some CSS to devices with a device-width no greater than 480 pixels using the media query in this question: How do I apply a stylesheet just to the iPhone (and not IE), without browser sniffing?

  2. Many media queries (e.g. width) can take a prefix of max- or min- to allow less than/greater than queries. So, max-width: 480px means “browsers with a width of 480 pixels or less” (and not “browsers with a maximum width of 480 pixels”).

  3. You can use them in the media attribute of the <link> element to conditionally load an entire stylesheet, or via the @media at-rule within a stylesheet to conditionally apply a block of CSS.

  4. All built-in iPhone and Android browsers support them, so they’re a good way to supply different styles to mobile devices. (You can also add them to your regular stylesheets to prevent mobile browsers from applying the regular stylesheets, if that’s appropriate for your project.)

The Media Queries spec is here, and pretty readable:

Most of your work will be actually adapting the site’s design to mobile devices, rather than figuring out which media query to use.

Community
  • 1
  • 1
Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270