In this tutorial, I will be creating responsive web page using HTML5 page that was done in previous HTML5 post on Creating HTML5 page with CSS3.
About Responsive Web Page
Responsive Web Page is a page that responds to the screen size, platform and orientation which helps user to easily check the page. The web page can be made responsive by mixing of flexible widths, intelligent structure and proper use of CSS media queries.
A responsive web page helps user to easily switch from their laptop to iPad and any other devices which will render that page. The web page automatically switches to the required dimensions and helps user to enjoy the page at any resolutions.
In other words, it automatically responds to the user’s preferences and hence eliminates the need for another web page for targeting different gadgets in the market. All this is made possible by the use of Media Queries.
About Media Queries
Media queries was used even in CSS2 when it allowed us to create specific style-sheets for media type such as print or screen. Now with the additions in CSS3, Media Queries has become more powerful and efficient to use in the web pages.
Media Queries allows us to add expressions to media type to check for specific conditions and depending on that make adjustments in the stylesheet to display our page with respect to those conditions.
For example, you can specify different styles for desktop and different styles for mobile. It is extremely powerful because it allows us to make web page render in almost all different resolutions and devices without changing the content. So lets move ahead and see how this can be done.
Creating Responsive Web Page
I will be using the HTML5 page which was created in previous post. So, just for your reference below is the html5 page code.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
|
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><title>Responsive HTML5 Page Using Media Queries</title><style>/*HTML5 Tags Styles starts here */header, hgroup, nav, article, section, footer, aside, address{ display:block;}time{ font-style:italic; padding:0px 5px;}address{ font-size:11px; padding:10px 10px; text-align:right }body{ font-family:Georgia, "Times New Roman", Times, serif; }h1{ font-size: 25px; margin:0px;}.sidebar h1, #comments h1{ font-size:18px; padding:0px; border-bottom:2px solid #dedede;}/*Main Styles*/#Wrapper{ width: 900px; margin:0px auto;}#Wrapper2{ overflow:hidden; border:1px dotted #ddd;}#header { width: 100%;}#navigation { height: 37px; border: 1px solid #ddd; margin:0px auto; background-color:#f9f9f9; background-image:-webkit-linear-gradient( 90deg, #ccc 0%, #f9f9f9 10%, #fff 90%, #ccc 100%)}#navigation ul { list-style: none; margin:0px; padding:0px;}#navigation ul li { float: left; border-right: 1px solid #ddd; text-shadow: 0 1px 0 #fff;}#navigation ul li:nth-last-child(1){ border-right:none;}#navigation ul li a { display: inline-block; padding: 0 15px; height: 37px; line-height: 38px; text-decoration: none; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased; color: #888; font-weight: bold;}#navigation ul li a:active { background: #f6f6f6; -webkit-box-shadow: inset 0 2px 5px #ddd; -moz-box-shadow: inset 0 2px 5px #ddd; box-shadow: inset 0 2px 5px #ddd;}#navigation ul li a:hover{ color:#000;}#title h1 a, #title h1 a:hover, #title h1 a:hover, #title h1 a:hover { margin: 40px auto 20px auto; padding: 15px auto; display: inline-block; text-decoration: none; color: #444; -webkit-font-smoothing: antialiased; border-bottom: 6px solid transparent; text-rendering: optimizeLegibility;}#title h1 a:hover { border-bottom: 6px solid #eee;}#title h2 { font-weight: bold; color: #aaa; font-size: 14px; line-height: 140%; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased; padding:5px 0px;}#title h2 small { color: #000; font-size: 13px; font-weight: bold; text-transform: uppercase;}#title h2 a { text-decoration: none; color: #999;}#contents{ min-height: 408px; width: 65%; float: left; padding:15px; overflow:hidden; line-height:21px;}#contents h1{ padding:5px 0px;}#sidebar-wrapper { float: left; width:29%; padding:10px; border-right:1px solid #ccc;}.sidebar { float: left; padding: 10px; width:90%;}.sidebar li{ padding:5px 0px;}#comments article{ background-color:#fff; }#comments footer{ background-color:#f9f9f9;border-top:2px solid #CCC;border-bottom:3px solid #CCC; font-size:11px;}#comments footer p{ padding:0px; margin:0px; }blockquote{ padding:10px; margin:0px 0px; border-bottom:1px solid #dedede;}blockquote:before {content: '\201C';}blockquote:after {content: '\201D';}#copyrights{border-top:3px solid #CCC;border-bottom:3px solid #CCC;}#copyrights p{ float:left; margin:10px 15px 0px 0px;}/*HTML5 Tags Styles ends here */</style><script>document.createElement('header');document.createElement('hgroup');document.createElement('nav');document.createElement('article');document.createElement('section');document.createElement('time');document.createElement('footer');document.createElement('aside');document.createElement('address');</script></head><body><!-- Div Wrapper Element Starts Here --><div id="Wrapper"><!-- Header Element Starts Here --><header id="header"> <!-- Hgroup Element Starts Here --> <hgroup id="title"> <h1>HTML5</h1> <h2>Fifth <small>major</small> revision!</h2> </hgroup> <!-- Hgroup Element Ends Here --> <!-- Nav Element Starts Here --> <nav id="navigation"> <ul> <li><a href="http://feeds.feedburner.com/alldesignstuffsfeeds" target="_blank">RSS Feed of all articles</a></li> </ul> </nav> <!-- Nav Element Ends Here --></header><!-- Header Element Ends Here --><!-- Div wrapper2 starts here --><div id="Wrapper2"><!-- Aside Element Starts Here --><aside id="sidebar-wrapper"> <!-- this aside contains two sections that are tangentially related to the page, namely, links to other blogs, and links to blog posts from this blog --> <nav class="sidebar"> <h1>My Links</h1> <ul> </ul> </nav> <nav class="sidebar"> <h1>Recent Posts</h1> <ol reversed> <li><a href="http://www.alldesignstuffs.com/2011/css3-image-rack-part-2/" target="_blank">CSS3 Image Rack Part 2</a> <li><a href="http://www.alldesignstuffs.com/2011/css3-image-rack-part-1/" target="_blank">CSS3 Image Rack Part 1</a> </ol> </nav> <!-- Aside Element Ends Here --> <!-- Another Aside Element Starts Here --> <section class="sidebar"> <!-- this aside is tangentially related to the page also, it contains twitter messages from the blog --> <h1>Twitter Feed</h1> </blockquote> </blockquote> </section> </aside> <!-- Another Aside Element Ends Here --><!-- Article Element Starts Here --><article id="contents"><!-- Article's Header Element Starts Here --> <header> <h1>Responsive HTML5 Page Using Media Queries</h1> </header><!-- Article's Header Element Ends Here --> <p>In this tutorial, I will be creating responsive web page using <a href="http://www.alldesignstuffs.com/2011/creating-html5-page-with-css3/" title="Creating HTML5 page with CSS3" target="_blank">HTML5 page that was done in previous HTML5 post on Creating HTML5 page with CSS3</a>...<br/><br/>[<a href="http://www.alldesignstuffs.com/2011/creating-html5-page-with-css3/" target="_blank">Read more</a>]</p> <!-- Article's Comments Section Element Starts Here --> <section id="comments"> <h1>Comments</h1> <article> <p>Nice post on html5 structure!</p> <footer> <p>Commented by: Sagar Ranpise | Published<time pubdate datetime="2011-06-12T19:10-08:00">Today</time> </p> </footer> </article> <article> <p>Good post on html5 markups!</p> <footer> <p>Commented by: Sagar Ranpise | Published<time pubdate>2011-06-12</time> </p> </footer> </article> </section> <!-- Article's Comments Section Element Ends Here --></article><!-- Article Element Ends Here --></div><!-- Div wrapper2 ends here --><!-- Footer Element Starts Here --><footer id="copyrights"> <p><small>© 2011 <a href="http://www.alldesignstuffs.com/" target="_blank">All Design Stuffs</a></small></p> <p><a href="http://www.alldesignstuffs.com/about-us/" target="_blank">About Us</a> - <a href="http://www.alldesignstuffs.com/category/css3/" target="_blank">CSS3</a> - <a href="http://www.alldesignstuffs.com/contact-us/" target="_blank">Contact Us</a></p> <address> For more details, contact <a href="mailto:alldesignstuffs@gmail.com">All Design Stuffs</a>. </address></footer><!-- Footer Element Ends Here --></div><!-- Div Wrapper Element ends Here --></body></html> |
As you can see, all the code and structure in the above code is same. I have just made changes in the title, heading, paragraph text and link to the read more of the html5 page.
So, lets begin with the CSS3 Media queries. Media queries can be used using link tag as shown below
|
1
2
|
<link rel="stylesheet" type="text/css" media="screen" href="your-stylesheet.css"><link rel="stylesheet" type="text/css" media="print" href="your-stylesheet.css"> |
or by adding it directly inside the stylesheet.
|
1
2
3
4
5
|
@media screen { .yourClassName { font-family: "Font family that you like"; } #yourIdName { font-family: "Font family that you like"; } yourElementName { font-family: "Font family that you like"; }} |
If you check the above code you can see the syntax for media queries that is starting with the @media then a space and then writing the specific condition for which you want the included style to respond. Yes, that’s it. It’s that simple to make the web page responsive.
Below is the syntax,
|
1
2
3
4
5
6
7
8
|
@media specificCondition { #youridOr .yourClassOr yourElement { -webkit-transition: width 1s ease-in-out; -moz-transition: width 1s ease-in-out; -o-transition: width 1s ease-in-out; transition: width 1s ease-in-out; }} |
Next up, lets make the html5 page responsive. Just add the below media queries inside the css code of the html5 page.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
@media all { #Wrapper,#navigation ul li a { -webkit-transition: width 1s ease-in-out; -moz-transition: width 1s ease-in-out; -o-transition: width 1s ease-in-out; transition: width 1s ease-in-out; }}@media screen and (min-width: 1401px){ #Wrapper{ width: 1300px; margin:0px auto;} #contents{ width: 65%; }}@media screen and (min-width: 1200px) and (max-width: 1400px) { #Wrapper{ width: 1100px; margin:0px auto;} #contents{ width: 65%; }}@media screen and (min-width: 961px) and (max-width: 1200px) { #Wrapper{ width: 960px; margin:0px auto;} #contents{ width: 65%; } #contents h1{ line-height:30px;}}@media screen and (min-width: 859px) and (max-width: 960px) { #Wrapper{ width: 830px; margin:0px auto;} #navigation ul li a{ font-size:12px; padding:0px 11px;} #contents{ width: 63%; } #contents h1{ line-height:30px;}}@media screen and (min-width: 761px) and (max-width: 860px) { #Wrapper{ width: 740px; margin:0px auto;} #navigation ul li a{ font-size:12px; padding:0px 11px;} #contents{ width: 63%; } #contents h1{ line-height:30px;}}@media screen and (min-width: 641px) and (max-width: 760px) { #Wrapper{ width: 620px; margin:0px auto;} header{ text-align:center;} #navigation{ height:190px;} #navigation ul li{ float:none; text-align:center; border-bottom:1px solid #dedede; } #navigation ul li a{ font-size:11px; padding:0px 0px; width:100%;} #contents{ width: 55%; font-size:12px; } #contents h1{ font-size:16px; text-align:left;} #comments h1,.sidebar h1{ font-size:12px; text-align:left;} #sidebar-wrapper { float: left; font-size:11px; width:30%;clear:both; }}@media screen and (min-width: 421px) and (max-width: 640px) { #Wrapper{ width: 420px; margin:0px auto;} header{ text-align:center;} #navigation{ height:190px;} #navigation ul li{ float:none; text-align:center; border-bottom:1px solid #dedede; } #navigation ul li a{ font-size:11px; padding:0px 0px; width:100%;} #contents{ width: 95%; font-size:12px;position:relative; } #contents h1{ font-size:16px; text-align:left;} #comments h1,.sidebar h1{ font-size:12px; text-align:left;} #sidebar-wrapper { float: none; font-size:11px; width:95%;clear:both; }}@media screen and (min-width: 320px) and (max-width: 420px) { #Wrapper{ width: 320px; margin:0px auto;} header{ text-align:center;} #navigation{ height:190px;} #navigation ul li{ float:none; text-align:center; border-bottom:1px solid #dedede; } #navigation ul li a{ font-size:11px; padding:0px 0px; width:100%;} #contents{ width: 95%; font-size:12px;position:relative; } #contents h1{ font-size:16px; text-align:left;} #comments h1,.sidebar h1{ font-size:12px; text-align:left;} #sidebar-wrapper { float: none; font-size:11px; width:95%;clear:both; }}@media screen and (min-width: 0px) and (max-width: 319px) { #Wrapper{ width: 100%; margin:0px auto;} header{ text-align:center;} #navigation{ height:190px;} #navigation ul li{ float:none; text-align:center; border-bottom:1px solid #dedede; } #navigation ul li a{ font-size:11px; padding:0px 0px; width:100%;} #contents{ width: 95%; font-size:12px;position:relative; } #contents h1{ font-size:16px; text-align:left;} #comments h1,.sidebar h1{ font-size:12px; text-align:left;} #sidebar-wrapper { float: none; font-size:11px; width:95%;clear:both; }}/* ----------------------------------------------------------- all the css for print ------------------------------------------------------------- */@media print {} |
In the above code I have added many different conditions to respond to different resolutions, devices etc. So Let’s go through it one by one.
About @media all
When you use @media all it will add the style to all media. Even if we don’t add it in the media query, by default all is the value considered.
As per W3org,
A shorthand syntax is offered for media queries that apply to all media types; the keyword ‘all’ can be left out (along with the trailing ‘and’). I.e. if the media type is not explicitly given it is ‘all’.
About @media screen and (min- 1401px)
As we discussed so far, when we add screen then the device type the style will apply is screen and the other condition is that when the minimum width is 1401px the style inside that will execute. That is, if the size is 1401px or above the style will respond.
About @media screen and (max- 1401px)
Now again the device type targeted is screen but if the code is max- 1401px then the style will only respond till 1401px or below. That is, it will not execute the specific style if the width is above 1401px.
About @media screen and (min- 1200px) and (max- 1400px)
Now here is the main part, the device type is screen and we can restrict the style to execute in specific range. That is if (min- 1200px) and (max- 1400px) then the style inside the media query will only apply when the width is between 1200px and 1400px.
This makes the web page extremely powerful because now we don’t need to create another page for a specific width. Suppose If we want to see the same site in iPad or iPhone, all we have to do is yes you are right. Just make changes in the minimum width and maximum width and the style will execute depending on the conditions mentioned.
But that is not the only thing. One more important thing is to add the most important meta tag with the code shown below to the head area.
Adding meta tag to render it properly in mobile phones
|
1
|
<meta name="viewport" content="width=device-width; initial-scale=1" /> |
The above code will help the site to render beautifully in the mobile devices such as iPhone etc. Because adding the meta viewport code overrides the default of mobile devices which rescales the web page to fit the tiny screen. But with the use of meta viewport the issue is sorted by leaving them as per the device width that is if their width is the same as the device’s width more specifically for iphone (in either portrait or lanscape mode).
Responsive HTML5 Page Using Media Queries
So final html5 page with all media queries is as follows,
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
|
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width; initial-scale=1" /><title>Creating Responsive HTML5 Page Using Media Queries</title><style>/*HTML5 Tags Styles starts here */header, hgroup, nav, article, section, footer, aside, address{ display:block;}time{ font-style:italic; padding:0px 5px;}address{ font-size:11px; padding:10px 10px; text-align:right }body{ font-family:Georgia, "Times New Roman", Times, serif; }h1{ font-size: 25px; margin:0px;}.sidebar h1, #comments h1{ font-size:18px; padding:0px; border-bottom:2px solid #dedede;}/*Main Styles*/#Wrapper{ width: 90%; margin:0px auto;}#Wrapper2{ overflow:hidden; border:1px dotted #ddd;}#header { width: 100%;}#navigation { height: 37px; border: 1px solid #ddd; margin:0px auto; background-color:#f9f9f9; background-image:-webkit-linear-gradient( 90deg, #ccc 0%, #f9f9f9 10%, #fff 90%, #ccc 100%)}#navigation ul { list-style: none; margin:0px; padding:0px;}#navigation ul li { float: left; border-right: 1px solid #ddd; text-shadow: 0 1px 0 #fff;}#navigation ul li:nth-last-child(1){ border-right:none;}#navigation ul li a { display: inline-block; padding: 0 15px; height: 37px; line-height: 38px; text-decoration: none; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased; color: #888; font-weight: bold;}#navigation ul li a:active { background: #f6f6f6; -webkit-box-shadow: inset 0 2px 5px #ddd; -moz-box-shadow: inset 0 2px 5px #ddd; box-shadow: inset 0 2px 5px #ddd;}#navigation ul li a:hover{ color:#000;}#title h1 a, #title h1 a:hover, #title h1 a:hover, #title h1 a:hover { margin: 40px auto 20px auto; padding: 15px auto; display: inline-block; text-decoration: none; color: #444; -webkit-font-smoothing: antialiased; border-bottom: 6px solid transparent; text-rendering: optimizeLegibility;}#title h1 a:hover { border-bottom: 6px solid #eee;}#title h2 { font-weight: bold; color: #aaa; font-size: 14px; line-height: 140%; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased; padding:5px 0px;}#title h2 small { color: #000; font-size: 13px; font-weight: bold; text-transform: uppercase;}#title h2 a { text-decoration: none; color: #999;}#contents{ min-height: 408px; width: 65%; float: left; padding:15px; overflow:hidden; line-height:21px;}#contents h1{ padding:5px 0px;}#sidebar-wrapper { float: left; width:29%; padding:10px; border-right:1px solid #ccc;}.sidebar { float: left; padding: 10px; width:90%;}.sidebar li{ padding:5px 0px;}#comments article{ background-color:#fff; }#comments footer{ background-color:#f9f9f9;border-top:2px solid #CCC;border-bottom:3px solid #CCC; font-size:11px;}#comments footer p{ padding:0px; margin:0px; }blockquote{ padding:10px; margin:0px 0px; border-bottom:1px solid #dedede;}blockquote:before {content: '\201C';}blockquote:after {content: '\201D';}#copyrights{border-top:3px solid #CCC;border-bottom:3px solid #CCC;}#copyrights p{ float:left; margin:10px 15px 0px 0px;}@media all { #Wrapper,#navigation ul li a { -webkit-transition: width 1s ease-in-out; -moz-transition: width 1s ease-in-out; -o-transition: width 1s ease-in-out; transition: width 1s ease-in-out; }}@media screen and (min-width: 1401px){ #Wrapper{ width: 1300px; margin:0px auto;} #contents{ width: 65%; }}@media screen and (min-width: 1200px) and (max-width: 1400px) { #Wrapper{ width: 1100px; margin:0px auto;} #contents{ width: 65%; }}@media screen and (min-width: 961px) and (max-width: 1200px) { #Wrapper{ width: 960px; margin:0px auto;} #contents{ width: 65%; } #contents h1{ line-height:30px;}}@media screen and (min-width: 859px) and (max-width: 960px) { #Wrapper{ width: 830px; margin:0px auto;} #navigation ul li a{ font-size:12px; padding:0px 11px;} #contents{ width: 63%; } #contents h1{ line-height:30px;}}@media screen and (min-width: 761px) and (max-width: 860px) { #Wrapper{ width: 740px; margin:0px auto;} #navigation ul li a{ font-size:12px; padding:0px 11px;} #contents{ width: 63%; } #contents h1{ line-height:30px;}}@media screen and (min-width: 641px) and (max-width: 760px) { #Wrapper{ width: 620px; margin:0px auto;} header{ text-align:center;} #navigation{ height:190px;} #navigation ul li{ float:none; text-align:center; border-bottom:1px solid #dedede; } #navigation ul li a{ font-size:11px; padding:0px 0px; width:100%;} #contents{ width: 55%; font-size:12px; } #contents h1{ font-size:16px; text-align:left;} #comments h1,.sidebar h1{ font-size:12px; text-align:left;} #sidebar-wrapper { float: left; font-size:11px; width:30%;clear:both; }}@media screen and (min-width: 421px) and (max-width: 640px) { #Wrapper{ width: 420px; margin:0px auto;} header{ text-align:center;} #navigation{ height:190px;} #navigation ul li{ float:none; text-align:center; border-bottom:1px solid #dedede; } #navigation ul li a{ font-size:11px; padding:0px 0px; width:100%;} #contents{ width: 95%; font-size:12px;position:relative; } #contents h1{ font-size:16px; text-align:left;} #comments h1,.sidebar h1{ font-size:12px; text-align:left;} #sidebar-wrapper { float: none; font-size:11px; width:95%;clear:both; }}@media screen and (min-width: 320px) and (max-width: 420px) { #Wrapper{ width: 320px; margin:0px auto;} header{ text-align:center;} #navigation{ height:190px;} #navigation ul li{ float:none; text-align:center; border-bottom:1px solid #dedede; } #navigation ul li a{ font-size:11px; padding:0px 0px; width:100%;} #contents{ width: 95%; font-size:12px;position:relative; } #contents h1{ font-size:16px; text-align:left;} #comments h1,.sidebar h1{ font-size:12px; text-align:left;} #sidebar-wrapper { float: none; font-size:11px; width:95%;clear:both; }}@media screen and (min-width: 0px) and (max-width: 319px) { #Wrapper{ width: 100%; margin:0px auto;} header{ text-align:center;} #navigation{ height:190px;} #navigation ul li{ float:none; text-align:center; border-bottom:1px solid #dedede; } #navigation ul li a{ font-size:11px; padding:0px 0px; width:100%;} #contents{ width: 95%; font-size:12px;position:relative; } #contents h1{ font-size:16px; text-align:left;} #comments h1,.sidebar h1{ font-size:12px; text-align:left;} #sidebar-wrapper { float: none; font-size:11px; width:95%;clear:both; }}/* ----------------------------------------------------------- all the css for print ------------------------------------------------------------- */@media print {}/*HTML5 Tags Styles ends here */</style><script>document.createElement('header');document.createElement('hgroup');document.createElement('nav');document.createElement('article');document.createElement('section');document.createElement('time');document.createElement('footer');document.createElement('aside');document.createElement('address');</script></head><body><!-- Div Wrapper Element Starts Here --><div id="Wrapper"><!-- Header Element Starts Here --><header id="header"> <!-- Hgroup Element Starts Here --> <hgroup id="title"> <h1>HTML5</h1> <h2>Fifth <small>major</small> revision!</h2> </hgroup> <!-- Hgroup Element Ends Here --> <!-- Nav Element Starts Here --> <nav id="navigation"> <ul> <li><a href="http://feeds.feedburner.com/alldesignstuffsfeeds" target="_blank">RSS Feed of all articles</a></li> </ul> </nav> <!-- Nav Element Ends Here --></header><!-- Header Element Ends Here --><!-- Div wrapper2 starts here --><div id="Wrapper2"><!-- Aside Element Starts Here --><aside id="sidebar-wrapper"> <!-- this aside contains two sections that are tangentially related to the page, namely, links to other blogs, and links to blog posts from this blog --> <nav class="sidebar"> <h1>My Links</h1> <ul> </ul> </nav> <nav class="sidebar"> <h1>Recent Posts</h1> <ol reversed> <li><a href="http://www.alldesignstuffs.com/2011/css3-image-rack-part-2/" target="_blank">CSS3 Image Rack Part 2</a> <li><a href="http://www.alldesignstuffs.com/2011/css3-image-rack-part-1/" target="_blank">CSS3 Image Rack Part 1</a> </ol> </nav> <!-- Aside Element Ends Here --> <!-- Another Aside Element Starts Here --> <section class="sidebar"> <!-- this aside is tangentially related to the page also, it contains twitter messages from the blog --> <h1>Twitter Feed</h1> </blockquote> </blockquote> </section> </aside> <!-- Another Aside Element Ends Here --><!-- Article Element Starts Here --><article id="contents"><!-- Article's Header Element Starts Here --> <header> <h1>Creating Responsive HTML5 Page Using Media Queries</h1> </header><!-- Article's Header Element Ends Here --> <p>In this tutorial, I will be creating responsive web page using <a href="http://www.alldesignstuffs.com/2011/creating-html5-page-with-css3/" title="Creating HTML5 page with CSS3" target="_blank">HTML5 page that was done in previous HTML5 post on Creating HTML5 page with CSS3</a>...<br/><br/>[<a href="http://www.alldesignstuffs.com/2011/creating-html5-page-with-css3/" target="_blank">Read more</a>]</p> <!-- Article's Comments Section Element Starts Here --> <section id="comments"> <h1>Comments</h1> <article> <p>Nice post on html5 structure!</p> <footer> <p>Commented by: Sagar Ranpise | Published<time pubdate datetime="2011-06-12T19:10-08:00">Today</time> </p> </footer> </article> <article> <p>Good post on html5 markups!</p> <footer> <p>Commented by: Sagar Ranpise | Published<time pubdate>2011-06-12</time> </p> </footer> </article> </section> <!-- Article's Comments Section Element Ends Here --></article><!-- Article Element Ends Here --></div><!-- Div wrapper2 ends here --><!-- Footer Element Starts Here --><footer id="copyrights"> <p><small>© 2011 <a href="http://www.alldesignstuffs.com/" target="_blank">All Design Stuffs</a></small></p> <p><a href="http://www.alldesignstuffs.com/about-us/" target="_blank">About Us</a> - <a href="http://www.alldesignstuffs.com/category/css3/" target="_blank">CSS3</a> - <a href="http://www.alldesignstuffs.com/contact-us/" target="_blank">Contact Us</a></p> <address> For more details, contact <a href="mailto:alldesignstuffs@gmail.com">All Design Stuffs</a>. </address></footer><!-- Footer Element Ends Here --></div><!-- Div Wrapper Element ends Here --></body></html> |
In the above code, if you check the @media print, I have purposely kept it blank. Because I want the print code from you through comments. Go ahead and check the demo by resizing the browser to enjoy the responsive web page.
Additionally you can check the demo on the Responsive Design Testing, a tool for testing the page on different resolutions and different devices. The page is even compatible for lower end mobile devices and for that you can check the demo on the dotMobi Emulator
Thanks again for reading the post and I hope this will help you to create many responsive web pages.
这是原文地址：http://www.alldesignstuffs.com/2011/creating-responsive-html5-page-using-media-queries/