Recently I had to design a form which works on both the desktop, tablet and mobile screens. As you know there are a number of resolutions out there, it becomes quite overwhelming to decide which screen resolution to support and not to. This is where the responsive queries come into picture.
At the end of day, responsive queries are CSS based keywords to detect the type of screen and style your pages according to that. I went with the assumption that I would just support two screen resolutions mobile and desktop. The tablet would just render the desktop version.
First step would be write the responsive query in your .css file.
[sourcecode language=”css”]
@media only screen and (min-width : 480px){
// for desktop
.body{
width: 800px;
}
}
@media only screen and (min-width : 480px){
// for mobile
// basically this will guarantee that all mobile screens will render this
.body{
width: 300px // or provide your number here
}
}
[/sourcecode]
After setting the width the next important step is setting the viewport, which will basically help you in the mobile versions. This will keep the screen size fixed.
[sourcecode language=”css”]
<meta name="viewport" content="width=device-width, maximum-scale=1.0" />
[/sourcecode]
Next, if your using div, you can easily use the below tags, so that some parts are not displayed in the web and desktop versions, depending on what you want.
[sourcecode language=”css”]
#mobileImage{
display: none;
}
#webImage{
display: none;
}
[/sourcecode]