Hi, I just want to ask if how can i make my website not to be destroy in viewing in the mobile phone…I mean i want that it will adopt the screen of the mobile phone or by viewing in the ipad etc…I want my website will resize depends on the gadgets or the mobile phone.
Thank you in advance 
Responsive design, that is the word your looking for. It is becoming very popular now, and it looks like that very very soon without responsive design you wont be able to do anything, as more than half of internet traffic is comming now from other devices but PC.
There is many different articles about responsive design, as well I have seen few good ones on sitepoint. Plus on google you will find many tutorials on this theme.
Main idea of Responsive design is that all properties is set to fluid width, such as em’s or percentages. So depending on screen size, your website will resize, will adapt.
Yes, firstly, avoid setting fixed widths on elements, and as you build the site, look at what happens to elements as you narrow and widen the browser window. Flexible widths (em or %) in combination with @media rules and the viewport meta element are the way to go. E.g. When using @media rules, you can place this in the head of your document for better results:
<meta name="viewport" content="width=device-width">
Hi ralph what is value of
content=“width=device-width”
It’s a bit complicated, but by default, a device like the iPhone treats your layout as something like 980px wide when you are using @media rules (thus hiding a lot of it off screen), unless you tell the browser to fit everything on the actual screen. Here’s a much more detailed explanation of it:
Hi ralph,Thank you for this link…I will read this
Hi raplh, Is the annotation is necessary ?
Not sure what you mean.
Hi, I mean this “@”
You need the @ in your style sheet, as in
[COLOR="#FF0000"]@media[/COLOR] only screen and (min-width : 320px) and (max-width : 480px) {
[I]your small screen styles here[/I]
}
Thanks ralph