I am absolutely not an html guru or expert so first the disclaimer - what I tell you is only probably true.
The answer to your question - I don't know if you can specify css by device type beyond screen and print (and projector?) but it is normally done by screen (or window) size alone with break point at around 640-720 being the width below which is 'phone' or 'hand-held'. So if you want to add declarations to your existing css for mobiles you write something like:
Code:
@media screen and (max-width: 680px) {
p {line-height: 100%; }
aside {display: none}
}
If you want to have a whole different css for mobiles you write in you template <head> something like
Code:
<link rel="stylesheet" type="text/css" media="all and (min-width: 700px)" href="<?php get_theme_url(); ?>/style.css" />
<link rel="stylesheet" type="text/css" media="all and (max-width: 700px)" href="<?php get_theme_url(); ?>/stylemobile.css" />
Just that (plus percentages instead of pixels) will get you a responsive site, or effectively a separate mobile site but a lot of people like to make sites on a prepared framework or a grid system or a boilerplate css. Whichever one you choose to use you will need to learn it's methods and conventions. The top two in the world are Bootstrap and Foundation. Bootstrap works really well with GetSimple and rick parish has done a fine job on turning it into a theme:
http://get-simple.info/extend/theme/bootstrap3/736/
There was a bloke doing a foundation theme but last time I looked it was still in beta and he seems to have gone away:
http://get-simple.info/extend/theme/foundationnation-responsive-theme/598/
There is also my own port of the skeleton css, simple and easy to learn but not cutting edge any more: http://get-simple.info/extend/theme/gskeleton/610/
or any of the pure css themes like: http://get-simple.info/extend/theme/pure-side-menu/748/
Hope that helps. Let us know how you get on.
