---- the HTML5 responsive (adaptive) Web Design
Now, many projects are responsive or adaptive needs to be done to accommodate our different screen sizes of mobile phones, computers and other equipment, so we need to work hard on the page, here is how I would do Responsive (adaptive) of Web Design
1, the head page code, add the line viewport metatags
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
Increase the page's <head> more than words, let the width of the page automatically adapt to the width of the mobile screen, the following is an explanation of these attributes:
1) width = device-width: the width represents the width of the screen device
2) initial-scale = 1.0: represents an initial scaling, 1.0 page is 100%
3) minimum-scale = 1.0: represents the minimum scaling
4) maximum-scale = 1.0: represents the maximum scale
5) user-scalable = no: indicates whether the user can adjust the zoom
If you want to be compatible, then IE6 / 7/8, it is necessary with css3-mediaqueries.js
|
1
2
3
|
<!--[
if
lt IE 9]>
<script src=
"http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"
></script>
<![endif]-->
|
2, do not use absolute width
width:auto; / width:XX%;
3, the default font size is the page size of 100%, that is 16 pixels, do not use the absolute size of the "px", to use the relative size of the "rem"
|
1
2
|
html{
font-size
:
62.5%
;}
body {
font
:
normal
100%
Arial
,
sans-serif
;
font-size
:
14px
;
font-size
:
1.4
rem; }
|
Of course, the style will be better with media queries, such as
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
html{
font-size
:
10px
}
10px
==
62.5%
@media
screen
and (
min-width
:
321px
) and (
max-width
:
375px
){html{
font-size
:
11px
}}
@media
screen
and (
min-width
:
376px
) and (
max-width
:
414px
){html{
font-size
:
12px
}}
@media
screen
and (
min-width
:
415px
) and (
max-width
:
639px
){html{
font-size
:
15px
}}
@media
screen
and (
min-width
:
640px
) and (
max-width
:
719px
){html{
font-size
:
20px
}}
@media
screen
and (
min-width
:
720px
) and (
max-width
:
749px
){html{
font-size
:
22.5px
}}
@media
screen
and (
min-width
:
750px
) and (
max-width
:
799px
){html{
font-size
:
23.5px
}}
@media
screen
and (
min-width
:
800px
){html{
font-size
:
25px
}}
|
However, if the PC side, preferably with min-width, max-width, preferably at the moving end with min-device-width and max-device-width
4, the layout of the flow, "the flow distribution" means that the position of each of the blocks are floating, not fixed
|
1
2
|
.
left
{
width
:
30%
;
float
:
left
}
.
right
{
width
:
70%
;
float
:
right
;}
|
Thus, with the left and right floating floating, the benefits, if the width is too small, to fit two elements, the latter elements are automatically scrolled to the bottom of the front elements, in the horizontal direction will not overflow (overflow), to avoid horizontal scrolling to the appearance
5, choose to load CSS
Core "RWD", is the introduction of CSS3 Media Query module. Automatic detection of the width of the screen, and then load the appropriate CSS file
|
1
|
<
link
rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)" href="style/css/css600.css" />
|
Meaning of this code is: If the screen width is less than 600 pixels (max-device-width: 600px), loads the file css600.css.
If the width of the screen between the pixel 600 to pixel 980, the file is loaded css600-980.css
|
1
|
<
link
rel="stylesheet" type="text/css" media="screen and (min-width: 600px) and (max-device-width: 980px)" href="css600-980.css" />
|
There are (not recommended): In addition to loading CSS file with html tags, you can also load an existing CSS file
|
1
|
@import
url
(
"css600.css"
)
screen
and (max-device-
width
:
600px
);
|
6, CSS @media rule of (if there is a need to write)
|
1
|
@media
screen
and (max-device-
width
:
400px
) { .
left
{
float
:
none
;} }
|
When the screen width is less than 400px, floating canceled
7, the picture adaptation, "RWD" must also implement automatic image scaling.
|
1
|
img {
width
:
100%
;}
|
When the windows platform scale the image, image distortion may be visible. In this case, try using proprietary command IE
|
1
|
img {
width
:
100%
; -ms-interpolation-mode: bicubic;}
|
Or use js - imgSizer.js
|
1
2
3
4
|
addLoadEvent(function() {
var imgs = document.getElementById(
"content"
).getElementsByTagName(
"img"
);
imgSizer.collate(imgs);
});
|
Well, this page will write the adaptation it!
Now, many projects are responsive or adaptive needs to be done to accommodate our different screen sizes of mobile phones, computers and other equipment, so we need to work hard on the page, here is how I would do Responsive (adaptive) of Web Design
1, the head page code, add the line viewport metatags
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
Increase the page's <head> more than words, let the width of the page automatically adapt to the width of the mobile screen, the following is an explanation of these attributes:
1) width = device-width: the width represents the width of the screen device
2) initial-scale = 1.0: represents an initial scaling, 1.0 page is 100%
3) minimum-scale = 1.0: represents the minimum scaling
4) maximum-scale = 1.0: represents the maximum scale
5) user-scalable = no: indicates whether the user can adjust the zoom
If you want to be compatible, then IE6 / 7/8, it is necessary with css3-mediaqueries.js
|
1
2
3
|
<!--[
if
lt IE 9]>
<script src=
"http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"
></script>
<![endif]-->
|
2, do not use absolute width
width:auto; / width:XX%;
3, the default font size is the page size of 100%, that is 16 pixels, do not use the absolute size of the "px", to use the relative size of the "rem"
|
1
2
|
html{
font-size
:
62.5%
;}
body {
font
:
normal
100%
Arial
,
sans-serif
;
font-size
:
14px
;
font-size
:
1.4
rem; }
|
Of course, the style will be better with media queries, such as
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
html{
font-size
:
10px
}
10px
==
62.5%
@media
screen
and (
min-width
:
321px
) and (
max-width
:
375px
){html{
font-size
:
11px
}}
@media
screen
and (
min-width
:
376px
) and (
max-width
:
414px
){html{
font-size
:
12px
}}
@media
screen
and (
min-width
:
415px
) and (
max-width
:
639px
){html{
font-size
:
15px
}}
@media
screen
and (
min-width
:
640px
) and (
max-width
:
719px
){html{
font-size
:
20px
}}
@media
screen
and (
min-width
:
720px
) and (
max-width
:
749px
){html{
font-size
:
22.5px
}}
@media
screen
and (
min-width
:
750px
) and (
max-width
:
799px
){html{
font-size
:
23.5px
}}
@media
screen
and (
min-width
:
800px
){html{
font-size
:
25px
}}
|
However, if the PC side, preferably with min-width, max-width, preferably at the moving end with min-device-width and max-device-width
4, the layout of the flow, "the flow distribution" means that the position of each of the blocks are floating, not fixed
|
1
2
|
.
left
{
width
:
30%
;
float
:
left
}
.
right
{
width
:
70%
;
float
:
right
;}
|
Thus, with the left and right floating floating, the benefits, if the width is too small, to fit two elements, the latter elements are automatically scrolled to the bottom of the front elements, in the horizontal direction will not overflow (overflow), to avoid horizontal scrolling to the appearance
5, choose to load CSS
Core "RWD", is the introduction of CSS3 Media Query module. Automatic detection of the width of the screen, and then load the appropriate CSS file
|
1
|
<
link
rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)" href="style/css/css600.css" />
|
Meaning of this code is: If the screen width is less than 600 pixels (max-device-width: 600px), loads the file css600.css.
If the width of the screen between the pixel 600 to pixel 980, the file is loaded css600-980.css
|
1
|
<
link
rel="stylesheet" type="text/css" media="screen and (min-width: 600px) and (max-device-width: 980px)" href="css600-980.css" />
|
还有(不建议使用)：除了用html标签加载CSS文件，还可以在现有CSS文件中加载
|
1
|
@import
url
(
"css600.css"
)
screen
and (max-device-
width
:
600px
);
|
6、CSS的@media规则（如果有需要就写）
|
1
|
@media
screen
and (max-device-
width
:
400px
) { .
left
{
float
:
none
;} }
|
当屏幕宽度小于400px的时候，就取消浮动
7、图片自适应，"自适应网页设计"还必须实现图片的自动缩放。
|
1
|
img {
width
:
100%
;}
|
windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令
|
1
|
img {
width
:
100%
; -ms-interpolation-mode: bicubic;}
|
或使用js--imgSizer.js
|
1
2
3
4
|
addLoadEvent(function() {
var imgs = document.getElementById(
"content"
).getElementsByTagName(
"img"
);
imgSizer.collate(imgs);
});
|
好，这样写出的网页就会自适应啦！