制作自适应布局的模块及框架
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 HTML
5
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
; }
h
1
{
font-size
:
25px
;
margin
:
0px
;}
.sidebar h
1
, #comments h
1
{
font-size
:
18px
;
padding
:
0px
;
border-bottom
:
2px
solid
#dedede
;}
/*
Main Styles
*/
#Wrapper{
width
:
900px
;
margin
:
0px
auto
;}
#Wrapper
2
{
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(
90
deg,
#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 h
1
a, #title h
1
a:hover, #title h
1
a:hover, #title h
1
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 h
1
a:hover {
border-bottom
:
6px
solid
#eee
;
}
#title h
2
{
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 h
2
small
{
color
:
#000
;
font-size
:
13px
;
font-weight
:
bold
;
text-transform
:
uppercase
;
}
#title h
2
a {
text-decoration
:
none
;
color
:
#999
;
}
#contents{
min-height
:
408px
;
width
:
65%
;
float
:
left
;
padding
:
15px
;
overflow
:
hidden
;
line-height
:
21px
;
}
#contents h
1
{
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"
>
<h
1
>HTML
5
</h
1
>
<h
2
>Fifth <
small
>major</
small
> revision!</h
2
>
</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>
<li><a href=
"http://www.facebook.com/alldesignstuffs"
target=
"_blank"
>JOIN US on FACEBOOK</a></li>
</ul>
</nav>
<!-- Nav Element Ends Here -->
</header>
<!-- Header Element Ends Here -->
<!-- Div wrapper
2
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"
>
<h
1
>My Links</h
1
>
<ul>
</ul>
</nav>
<nav class=
"sidebar"
>
<h
1
>Recent Posts</h
1
>
<ol reversed>
<li><a href=
"http://www.alldesignstuffs.com/2011/css3-image-rack-part-2/"
target=
"_blank"
>CSS
3
Image Rack Part
2
</a>
<li><a href=
"http://www.alldesignstuffs.com/2011/css3-image-rack-part-1/"
target=
"_blank"
>CSS
3
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 -->
<h
1
>Twitter Feed</h
1
>
CSS
3
Image Rack Part
2
<a href=
"http://goo.gl/fb/oYxi5"
target=
"_blank"
>http://goo.gl/fb/oYxi
5
</a>
</blockquote>
</blockquote>
</section>
</aside>
<!-- Another Aside Element Ends Here -->
<!-- Article Element Starts Here -->
<article id=
"contents"
>
<!-- Article's Header Element Starts Here -->
<header>
<h
1
>Responsive HTML
5
Page Using Media Queries</h
1
>
</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"
>HTML
5
page that was done in previous HTML
5
post on Creating HTML
5
page with CSS
3
</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"
>
<h
1
>Comments</h
1
>
<article>
<p>Nice post on html
5
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 html
5
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 wrapper
2
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"
>CSS
3
</a> - <a href=
"http://www.alldesignstuffs.com/contact-us/"
target=
"_blank"
>Contact Us</a></p>
<address>
For more details, contact
</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
1
s ease-in-out;
-moz-transition: width
1
s ease-in-out;
-o-transition: width
1
s ease-in-out;
transition: width
1
s 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
1
s ease-in-out;
-moz-transition: width
1
s ease-in-out;
-o-transition: width
1
s ease-in-out;
transition: width
1
s 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 h
1
{
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 h
1
{
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 h
1
{
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 h
1
{
font-size
:
16px
;
text-align
:
left
;}
#comments h
1
,.sidebar h
1
{
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 h
1
{
font-size
:
16px
;
text-align
:
left
;}
#comments h
1
,.sidebar h
1
{
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 h
1
{
font-size
:
16px
;
text-align
:
left
;}
#comments h
1
,.sidebar h
1
{
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 h
1
{
font-size
:
16px
;
text-align
:
left
;}
#comments h
1
,.sidebar h
1
{
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-width: 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-width: 1401px)
Now again the device type targeted is screen but if the code is max-width: 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-width: 1200px) and (max-width: 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-width: 1200px) and (max-width: 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 HTML
5
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
; }
h
1
{
font-size
:
25px
;
margin
:
0px
;}
.sidebar h
1
, #comments h
1
{
font-size
:
18px
;
padding
:
0px
;
border-bottom
:
2px
solid
#dedede
;}
/*
Main Styles
*/
#Wrapper{
width
:
90%
;
margin
:
0px
auto
;}
#Wrapper
2
{
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(
90
deg,
#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 h
1
a, #title h
1
a:hover, #title h
1
a:hover, #title h
1
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 h
1
a:hover {
border-bottom
:
6px
solid
#eee
;
}
#title h
2
{
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 h
2
small
{
color
:
#000
;
font-size
:
13px
;
font-weight
:
bold
;
text-transform
:
uppercase
;
}
#title h
2
a {
text-decoration
:
none
;
color
:
#999
;
}
#contents{
min-height
:
408px
;
width
:
65%
;
float
:
left
;
padding
:
15px
;
overflow
:
hidden
;
line-height
:
21px
;
}
#contents h
1
{
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
1
s ease-in-out;
-moz-transition: width
1
s ease-in-out;
-o-transition: width
1
s ease-in-out;
transition: width
1
s 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 h
1
{
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 h
1
{
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 h
1
{
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 h
1
{
font-size
:
16px
;
text-align
:
left
;}
#comments h
1
,.sidebar h
1
{
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 h
1
{
font-size
:
16px
;
text-align
:
left
;}
#comments h
1
,.sidebar h
1
{
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 h
1
{
font-size
:
16px
;
text-align
:
left
;}
#comments h
1
,.sidebar h
1
{
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 h
1
{
font-size
:
16px
;
text-align
:
left
;}
#comments h
1
,.sidebar h
1
{
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"
>
<h
1
>HTML
5
</h
1
>
<h
2
>Fifth <
small
>major</
small
> revision!</h
2
>
</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>
<li><a href=
"http://www.facebook.com/alldesignstuffs"
target=
"_blank"
>JOIN US on FACEBOOK</a></li>
</ul>
</nav>
<!-- Nav Element Ends Here -->
</header>
<!-- Header Element Ends Here -->
<!-- Div wrapper
2
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"
>
<h
1
>My Links</h
1
>
<ul>
</ul>
</nav>
<nav class=
"sidebar"
>
<h
1
>Recent Posts</h
1
>
<ol reversed>
<li><a href=
"http://www.alldesignstuffs.com/2011/css3-image-rack-part-2/"
target=
"_blank"
>CSS
3
Image Rack Part
2
</a>
<li><a href=
"http://www.alldesignstuffs.com/2011/css3-image-rack-part-1/"
target=
"_blank"
>CSS
3
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 -->
<h
1
>Twitter Feed</h
1
>
CSS
3
Image Rack Part
2
<a href=
"http://goo.gl/fb/oYxi5"
target=
"_blank"
>http://goo.gl/fb/oYxi
5
</a>
</blockquote>
</blockquote>
</section>
</aside>
<!-- Another Aside Element Ends Here -->
<!-- Article Element Starts Here -->
<article id=
"contents"
>
<!-- Article's Header Element Starts Here -->
<header>
<h
1
>Creating Responsive HTML
5
Page Using Media Queries</h
1
>
</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"
>HTML
5
page that was done in previous HTML
5
post on Creating HTML
5
page with CSS
3
</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"
>
<h
1
>Comments</h
1
>
<article>
<p>Nice post on html
5
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 html
5
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 wrapper
2
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"
>CSS
3
</a> - <a href=
"http://www.alldesignstuffs.com/contact-us/"
target=
"_blank"
>Contact Us</a></p>
<address>
For more details, contact
</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/