Комментарий: редактор этой статьи представит вам, как использовать HTML5 для достижения поддержки веб -сайтов в Windows 8. Если вам это нужно, пожалуйста, см.
Во -первых, давайте узнаем о поддержке Windows 8. Приложения Metro в Windows 8 могут очень хорошо разделить экран. Следующий рисунок
Это позволяет пользователям очень легко переключаться во время использования. Система также имеет жесткие правила на прикрепление. Не более двух экранов один большой, а другой маленький. И ширина небольшого экрана закреплена на 320 пикселях.
Поэтому, когда пользователи публикуют веб -сайт в небольшой экран, страница по умолчанию уменьшается по умолчанию. Как показано на рисунке ниже:
Итак, как мы можем очень хорошо решить такую проблему? Как насчет того, чтобы сделать веб -сайт показать очень дружелюбный эффект под небольшим экраном Windows 8? Ниже у меня есть простой пример
Как показано на картинке, очень простая и традиционная страница, включая горизонтально расположенную навигацию, контент и т. Д.
И то же самое верно для традиционного кода
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<голова>
<title> </title>
<style>
.nav {
Подкладка: 5px 0px 5px 0px;
поля: 0px;
Ширина: 100%;
тип списка: нет;
фоновый цвет: #cddcd6;
Высота: 28px;
}
.nav li {
Маржа: 0px 1px 0px 0px;
Плавание: осталось;
фоновый цвет: #0094ff;
Подкладка: 5px 10px 5px 10px;
}
.dvitem {
Ширина: 100%;
Высота: 400px;
фоновый цвет: #b6ff00;
ясно: оба;
}
.основной {
Ширина: 960px;
Полевая: 0PX Auto 0px Auto;
}
</style>
</head>
<тело>
<div>
<ul>
<li> Дом </li>
<li> item1 </li>
<li> item2 </li>
<li> item3 </li>
<li> item4 </li>
</ul>
<div>
</div>
</div>
</body>
</html>
Такая страница уменьшается в эффекте прилипания, как показано на рисунке:
Как его изменить? На традиционных страницах, подобных этому, нам нужно только написать CSS на основе характеристик реле Windows 8. Пусть наша страница будет выложена и отображается на ширине 320 пикселей.
Код реализации следующим образом: добавьте следующий код стиля на исходную страницу
@Media Screen и (MAX-WIDTH: 320PX) {
@-ms-viewport {width: 320px; }
.nav {
Подкладка: 5px 0px 5px 0px;
поля: 0px;
Ширина: 100%; фоновый цвет: #fff;
}
.nav li {
Ширина: 300px;
ясно: оба;
Маржа: 0px 0px 1px 0px;
фоновый цвет: #0094ff;
Подкладка: 5px 0px 5px 0px;
}
.dvitem {
Ширина: 95%;
Высота: 600px;
фоновый цвет: #ff00a4;
ясно: оба;
}
.основной {
Ширина: 320px;
Полевая: 0PX Auto 0px Auto;
}
}
Нет никакой разницы между полноэкранным просмотром и традиционным просмотром.
Разница в том, что эффект отображения очевиден, когда вы придерживаетесь его к маленькому экрану, как показано на следующем рисунке.
Этот пример кода загрузка/файлы/риск/index.rar