---- HTML5, отзывчивый (адаптивный) Веб-дизайн
В настоящее время многие проекты отзывчивы или адаптивный должно быть сделано, чтобы приспособить наши различные размеры экранов мобильных телефонов, компьютеров и другого оборудования, поэтому мы должны работать на странице, вот как я бы Отзывчивый (адаптивный) из веб-дизайн
1, код головки страницы, добавьте строки окна просмотра метатеги
<META NAME = «вьюпорт» содержание = «ширина = ширина устройства, исходная шкала = 1,0, максимум шкалы = 1.0, минимальная шкала = 1,0, пользователь масштабируемый = нет»>
Увеличение этой страницы <HEAD> больше, чем слова, пусть ширина страницы автоматически адаптироваться к ширине экрана мобильного, следующее объяснение этих атрибутов:
1) ширина = ширина устройства: ширина представляет собой ширину экрана устройства
2) начально-шкала = 1,0: представляет собой начальное масштабирование, 1,0 страница 100%
3) минимальная шкала = 1,0: представляет минимальное масштабирование
4) максимальный масштаб = 1,0: представляет собой максимальную шкалу
не 5) пользователь масштабируемый = нет: указывает, может ли пользователь регулировать зум
Если вы хотите , чтобы быть совместимым, то IE6 / 7/8, необходимо с помощью 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, не используют абсолютную ширину
ширина: авто; / Ширина: ХХ%;
3, размер шрифта по умолчанию размера страницы 100%, то есть 16 пикселей, не использовать абсолютный размер «пикселей», чтобы использовать относительный размер «вещный»
|
1
2
|
html{
font-size
:
62.5%
;}
body {
font
:
normal
100%
Arial
,
sans-serif
;
font-size
:
14px
;
font-size
:
1.4
rem; }
|
Конечно, стиль будет лучше с медиа-запросами, такие как
|
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
}}
|
Однако, если на стороне ПК, желательно с мин-ширина, не более ширины, предпочтительно на конце движущейся с мин-устройства ширины и макс-устройства ширины
4, схема потока, «распределение потока» означает, что положение каждого из блоков с плавающей, а не фиксированной
|
1
2
|
.
left
{
width
:
30%
;
float
:
left
}
.
right
{
width
:
70%
;
float
:
right
;}
|
Таким образом, с левым и правой плавающими плавающим, преимуществом, если ширина слишком мала, чтобы поместиться два элемента, причем последние элементы автоматически прокручиваются к нижней части передних элементов, в горизонтальном направлении не будет переполнение (переполнение), чтобы избежать горизонтальной прокрутки к появлению
5, выбрать для загрузки CSS
Core «RWD», является внедрение модуля CSS3 медиа-запросов. Автоматическое определение ширины экрана, а затем загрузить соответствующий файл CSS
|
1
|
<
link
rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)" href="style/css/css600.css" />
|
Значение этого кода: Если ширина экрана составляет менее 600 пикселей (макс-устройство ширина: 600px), загружает файл css600.css.
Если ширина экрана между пикселем 600 пиксельной 980, файл будет загружен 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" />
|
Есть (не рекомендуется): В дополнение к загрузке файла CSS с HTML-теги, вы также можете загрузить существующий файл 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
;} }
|
Когда ширина экрана меньше 400 пикселей, плавающий отменено
7, адаптация картина, «RWD» необходимо также осуществлять автоматическое масштабирование изображения.
|
1
|
img {
width
:
100%
;}
|
Когда платформа окна масштабирования изображения, искажение изображения может быть видно. В этом случае попробуйте использовать проприетарные команды 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);
});
|
Ну, эта страница будет писать адаптации его!
В настоящее время многие проекты отзывчивы или адаптивный должно быть сделано, чтобы приспособить наши различные размеры экранов мобильных телефонов, компьютеров и другого оборудования, поэтому мы должны работать на странице, вот как я бы Отзывчивый (адаптивный) из веб-дизайн
1, код головки страницы, добавьте строки окна просмотра метатеги
<META NAME = «вьюпорт» содержание = «ширина = ширина устройства, исходная шкала = 1,0, максимум шкалы = 1.0, минимальная шкала = 1,0, пользователь масштабируемый = нет»>
Увеличение этой страницы <HEAD> больше, чем слова, пусть ширина страницы автоматически адаптироваться к ширине экрана мобильного, следующее объяснение этих атрибутов:
1) ширина = ширина устройства: ширина представляет собой ширину экрана устройства
2) начально-шкала = 1,0: представляет собой начальное масштабирование, 1,0 страница 100%
3) минимальная шкала = 1,0: представляет минимальное масштабирование
4) максимальный масштаб = 1,0: представляет собой максимальную шкалу
не 5) пользователь масштабируемый = нет: указывает, может ли пользователь регулировать зум
Если вы хотите , чтобы быть совместимым, то IE6 / 7/8, необходимо с помощью 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, не используют абсолютную ширину
ширина: авто; / Ширина: ХХ%;
3, размер шрифта по умолчанию размера страницы 100%, то есть 16 пикселей, не использовать абсолютный размер «пикселей», чтобы использовать относительный размер «вещный»
|
1
2
|
html{
font-size
:
62.5%
;}
body {
font
:
normal
100%
Arial
,
sans-serif
;
font-size
:
14px
;
font-size
:
1.4
rem; }
|
Конечно, стиль будет лучше с медиа-запросами, такие как
|
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
}}
|
Однако, если на стороне ПК, желательно с мин-ширина, не более ширины, предпочтительно на конце движущейся с мин-устройства ширины и макс-устройства ширины
4, схема потока, «распределение потока» означает, что положение каждого из блоков с плавающей, а не фиксированной
|
1
2
|
.
left
{
width
:
30%
;
float
:
left
}
.
right
{
width
:
70%
;
float
:
right
;}
|
Таким образом, с левым и правой плавающими плавающим, преимуществом, если ширина слишком мала, чтобы поместиться два элемента, причем последние элементы автоматически прокручиваются к нижней части передних элементов, в горизонтальном направлении не будет переполнение (переполнение), чтобы избежать горизонтальной прокрутки к появлению
5, выбрать для загрузки CSS
Core «RWD», является внедрение модуля CSS3 медиа-запросов. Автоматическое определение ширины экрана, а затем загрузить соответствующий файл CSS
|
1
|
<
link
rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)" href="style/css/css600.css" />
|
Значение этого кода: Если ширина экрана составляет менее 600 пикселей (макс-устройство ширина: 600px), загружает файл css600.css.
Если ширина экрана между пикселем 600 пиксельной 980, файл будет загружен 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);
});
|
好，这样写出的网页就会自适应啦！