Open your notepad and let start
We will be needing just two files: index.html and styles.css. A good thing about responsive web design is that you can use a single css file and the file will contain all the styling for all the targeting devices. Open your favorite text editor and paste the following code snippets in it and save as index.html.
The above markup is quite simple and the important part that prompt the scaling to device screens is the . Every other things are straightforward. You will notice I include a select menu, this will serve as our navigation menu on small screens. The select menu is hidden on large screen (you will see the style that does this shortly).
Now create a new file named styles.css and paste the code below in it:
This is the style sheet that controls all styling for different screen sizes. Its quite simple too, first will work from large screen down ton smaller screens. On a large screen the select is hidden and the horizontal navigation menu is rendered. As the screen size get smaller (320px in our case), the horizontal menu disappears and a select menu is used instead. We use the media queries (@media only screen and (max-width : 320px)) to style our target devices.
Now test it out and try resizing your browser to a width of 320px and you will see our website renders. If you are using latest Firefox, there is a Responsive Design View which you can use for this.
That’s it. I hope this is helpful. Comments and questions are welcomed using the comment box below.
Note: This tutorial is based on one of my previous tutorials Creating Two Column Layout. You can read it out.
- Blogger Comment
- Facebook Comment
Subscribe to:
Post Comments
(
Atom
)
0 comments:
Post a Comment
We Appreciate You Reading This Post, We Always Like To Hear From You, Please Take A Minute To Share Your Thoughts On The Comments Board Below.