Any Idea on Responsive Web Design ? Hi Dpers, I am currently studying on Responsive Web Design. Any Advice from where I need to start ? Thanks in Advance
Hi Aravintz, The basics with responsive web design is to have set CSS code targeting specific width of the device viewing the website. In the head tag you would add this code: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> And in the CSS style sheet you will add code to target display sizes such as: @media only screen and (min-width: 960px) and (max-width: 1200px) { .container{width:98%} } @media only screen and (min-width: 460px) and (max-width: 96000px) { .container{width:78%} }
I really don't think responsive web design is setting the viewport meta. I think its more about load times ?
I guess we are looking at this through different eyes. I just understood that you was looking for a starter on creating responsive web design.
The media query would be <link rel="stylesheet" href="stylesheet.css" type="text/css" media="screen" /> to target the stylesheet that links to the CSS file
If you know html then why not you use foundation framework for responsive websites. Its very easy to follow. read this link http://foundation.zurb.com/
Maximum scale prevents zooming, something you should NEVER include, so lose that last bit. No, that's just a link to the stylesheet with a MEDIA target (something that predates media queries by about a decade), you have no media query there! THIS: @media only screen and (min-width: 960px) and (max-width: 1200px) { Code (markup): Is a media query. You might want to at least learn the terminology and how to use it before opening your trap on the subject.
What a rude c*&k I had the query in the CSS in the original post, and the "link rel" was just pointing to it, I had a lot on and responded in a rush! But for you to open your mouth like a jerk, learn some manners!
Follow up below guideline for the Responsive web design starter. 1) Include this meta tag in the <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> 2) Add the meida query <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> 3) CCS3 Medai Quer is the trck for the responsive design and add into your css cals. /* 980px or less */ @media screen and (max-width:980px) { #page{widt: 94%;} #content{width: 65%;} #siebar{width: 30%;} } /* 700px or less */ @media screen and (max-width:700px) { #content{width: auto;} #siebar{width: none;} } /* 480px or less */ @media screen and (max-width:480px) { header{height: auto;} h1{font-size: 24px;} #siebar{display: none;} }
really so you are pirating themes now ? You think thats ok ?, I want the IronMan3 Movie you going to make a copy and post that online too ?