В этой статье представлена реализация отзывчивого (адаптивного) веб-дизайна HTML5, и она представлена всем желающим следующим образом:
Шаг 1. Добавьте строку метатегов области просмотра в заголовок кода веб-страницы.
<meta name=viewport content=width=ширина устройства, начальный масштаб=1 />
Область просмотра — это ширина и высота веб-страницы по умолчанию. Приведенная выше строка кода означает: ширина веб-страницы по умолчанию равна ширине экрана (ширина = ширина устройства) и исходному коэффициенту масштабирования (начальный масштаб). =1) равен 1,0, то есть исходный размер веб-страницы занимает 100% площади экрана.
Все основные браузеры поддерживают этот параметр, включая IE9. Для старых браузеров (в основном IE6, 7, 8) вам необходимо использовать css3-mediaqueries.js.
<!--[if lt IE 9]> <script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script> <![endif]-- >
Шаг 2: (Примечание) Не используйте абсолютную ширину и размер шрифта.
ширина: авто / ширина: XX%;
Шаг третий: (Примечание) Размер шрифта
Размер шрифта составляет 100 % от размера страницы по умолчанию, то есть 16 пикселей.
Не используйте для шрифтов абсолютный размер PX, используйте относительный размер REM.
html{размер шрифта:62,5%;} тело {шрифт: нормальный 100% Arial, без засечек; размер шрифта: 14 пикселей; размер шрифта: 1,4 rem;Шаг 4: Схема потока
Смысл гибкой компоновки заключается в том, что положение каждого блока является плавающим, а не фиксированным.
.left{ширина:30%; float:left} .right{ширина:70%; float:right;}Преимущество заключается в том, что если ширина слишком мала для размещения двух элементов, следующий элемент будет автоматически прокручиваться до нижней части предыдущего элемента, не выходя за пределы в горизонтальном направлении, что позволяет избежать появления горизонтальных полос прокрутки.
Шаг 5. Выберите загрузку CSS.
Ядром адаптивного веб-дизайна является модуль Media Query, представленный CSS3. Автоматически определять ширину экрана, а затем загружать соответствующий файл CSS.
<link rel=stylesheet type=text/css media=screen and (max-device-width: 600px) href=style/css/css600.css />
Приведенный выше код означает, что если ширина экрана меньше 600 пикселей (максимальная ширина устройства: 600 пикселей), загрузите файл css600.css.
Если ширина экрана составляет от 600 до 980 пикселей, загрузите файл css600-980.css.
<link rel=stylesheet type=text/css media=screen and (min-width: 600px) и (max-device-width: 980px) href=css600-980.css />
Также (не рекомендуется): помимо загрузки файлов CSS с тегами html, вы также можете загружать их в существующие файлы CSS.
экран @import url(css600.css) и (максимальная ширина устройства: 600 пикселей);
Шаг 6: Правила CSS @media
@media screen и (max-device-width: 400 пикселей) { .left{ float:none;} }Когда экран меньше 400, нажатие влево отменяет плавающее
Шаг 7: Адаптация изображений
Адаптивный веб-дизайн также должен реализовывать автоматическое масштабирование изображений.
img, объект {максимальная ширина: 100%;}Старые версии IE не поддерживают максимальную ширину, поэтому мне приходится писать:
img {ширина: 100%;}При масштабировании изображений на платформе Windows могут возникнуть искажения изображения. В это время вы можете попробовать использовать фирменную команду IE.
img {ширина: 100%; -ms-интерполяции-режим: бикубический;}Или используйте js--imgSizer.js
addLoadEvent(function() { var imgs = document.getElementById(content).getElementsByTagName(img); imgSizer.collate(imgs); });Примечание. Если возможно, лучше всего загружать изображения разного разрешения в соответствии с разными размерами экрана.
Простая операция:
<style type = text/css> img {max-width: 100%;} video { max-width: 100%; height: auto;} заголовок ul { float: left; list-style: none; тип: нет; поле вправо: 10 пикселей;} заголовок выберите {дисплей: нет;} @media (макс. ширина: 960 пикселей) { заголовок ul { дисплей: нет;} заголовок select{ display:inline-block;} } </style> <body> <header> <ul> <li><a href=# class=active>Home</a></li> <li><a href =#>AAA</a></li> <li><a href=#>BBB</a></li> <li><a href=#>CCC</a></li> <li ><a href=#>DDD</a></li> </ul> <select> <option class=selected><a href=#>Главная</a></option> <option value=/AAA>AAA</option> <option value=/BBB>BBB</ option> <option value=/CCC>CCC</option> <option value=/DDD>DDD</option> </select> </header> </body>Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.