Creating stylesheet with either 2 columns or 4 columns for iPhone or iPad

I am creating a web page to be accessed on both iPhone and iPad. In iPhone I want to display a 2 column web page and on iPad I want to display using a 4 column web page. iPhone layout would be

<label width=30%>Name</label> 
<input width=70% value="John Smith"></input>
<DIV>
<label width=30%>Phone</l开发者_C百科abel> 
<input width=70% value="888-555-5555"></input>

but on iPad I want it to be on a single row

<label width=20%>Name</label> 
<input width=30% value="John Smith"></input>
<label width=20%>Phone</label> 
<input width=30% value="888-555-5555"></input>

If you could please provide me with a simple example of CSS file that will achieve this using div tags.

I suggest you read this:

http://www.alistapart.com/articles/responsive-web-design/

This is not as simple as just adding some CSS rules you need to understand exactly what you are targeting, the above link is one of THE BEST when it comes to responsive web design.

This is also very good:

http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

The widely accepted method is to use Media Queries.

Here is a great article to read up on: http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

You can set up Media Queries for the three main viewport sizes: Small (phone), Medium (Tablets) and Large (Desktop/laptops):

<link href="small.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" />
<link href="medium.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 768px)" />
<link href="large.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)" />

@Myles Gray has supplied a very useful link for an article on Responsive Web Design that is also well worth reading.

The less framework uses media-queries to adapt to various screensize. Its a 10-column grid based framework. It does not contain any heavy css, only the media-queries prepared to target normal screen-size, tablets, mobiles and wide mobile layout.