Адаптивный — это набор шаблонов, которые адаптируются ко всем терминалам, но макет, видимый на каждом устройстве, один и тот же, широко известный как адаптивный по ширине.
Набор адаптивных шаблонов адаптируется ко всем терминалам, но макет, видимый на каждом устройстве, может отличаться.
Хотя отзывчивый/адаптивный веб-дизайн имеет такие недостатки, как большая нагрузка по совместимости с различными устройствами, громоздкий код и длительное время загрузки, они являются кроссплатформенными и терминальными, могут быть разработаны один раз, универсальны и могут быть адаптированы в соответствии с разрешение экрана и автоматическое масштабирование изображений и автоматическая настройка макетов — это не только технические реализации, но и новый подход к дизайну.
Решением для многих веб-сайтов является предоставление разных веб-страниц для разных устройств, например предоставление специальной мобильной версии или версии для iPhone/iPad. Хотя это обеспечивает эффект, это более хлопотно и требует одновременного ведения нескольких версий. Кроме того, если на веб-сайте имеется несколько порталов, это значительно усложнит архитектурный проект.
Адаптация по-прежнему создает проблему. Если экран слишком мал, даже если веб-страницу можно адаптировать к размеру экрана, при просмотре на маленьком экране будет казаться, что контент слишком перегружен. Адаптивность — это концепция, разработанная для решения этой проблемы. проблема. Он может автоматически распознавать ширину экрана и соответствующим образом корректировать веб-дизайн. Макет и отображаемый контент могут измениться.
Адаптивный интерфейс http://m.ctrip.com/html5/ Адаптивный интерфейс http://segmentfault.com/
Секретный сад CSS http://www.csszengarden.com/
http://caibaojian.com/demo/ued/
2. Базовые знания об оперативности 1. Установите метатег<meta name=viewport content=width=ширина устройства, начальный масштаб=1,0, максимальный масштаб=1,0, масштабируемый пользователем=нет>
Объясняются некоторые параметры этого кода:
§width = ширина устройства: ширина равна ширине текущего устройства.
§initial-scale: начальное масштабирование (настройка по умолчанию — 1,0).
§минимальный масштаб: минимальный масштаб, до которого пользователю разрешено масштабирование (по умолчанию — 1,0).
§Максимальный масштаб: максимальный масштаб, до которого пользователю разрешено масштабирование (по умолчанию установлено значение 1,0).
§масштабируемость пользователем: может ли пользователь масштабировать вручную (по умолчанию нет, поскольку мы не хотим, чтобы пользователи увеличивали и уменьшали масштаб страницы)
2. Медиа-запрос Медиа-запрос CSS3 — ключевой фактор в реализации адаптивного дизайна. Вы можете использовать функцию медиа-запроса, чтобы страница использовала разные блоки CSS в зависимости от ширины устройства.
Следующие правила CSS вступят в силу, когда ширина экрана меньше или равна 980:
@media (ориентация: портрет) и (макс. ширина: 460 пикселей) { .video .innerBox .news a.more { display: none } .video .innerBox .news span { display: none } .video .innerBox .news; { ширина: 100% } .video .innerBox .news ul { ширина: 100%; }}ориентация: портрет |
портрет:
Указывает, что высота видимой области страницы в указанном устройстве вывода больше или равна ширине.
пейзаж:
За исключением портретного значения, все они альбомные.
Выберите «Загрузить CSS», чтобы загрузить файл smallScreen.css, если ширина экрана составляет от 400 до 600 пикселей.
<link rel=stylesheet type=text/cssmedia=screen and (min-width: 400px) и (max-device-width: 600px) href=smallScreen.css />
3. Процентная раскладка
3. Адаптивный дизайн страниц, шрифты и обработка изображений.1. Процесс разработки адаптивной страницы html5/css3.
Шаг 1. Определите тип устройства и размер экрана, которые должны быть совместимы: включая мобильные устройства (мобильные телефоны, планшеты) и ПК. Что касается мобильных устройств, обратите внимание на добавление функций жестов при их разработке и реализации.
Размер экрана: включая различные размеры экрана мобильного телефона (в том числе горизонтальные и вертикальные), различные размеры планшетов (в том числе горизонтальные и вертикальные), обычные компьютерные экраны и широкоформатные экраны.
Шаг 2. Создайте разные прототипы каркасов для определенных размеров. Вам необходимо учитывать, как меняется макет страницы при разных размерах, как масштабировать размер контента, удалять функции и контент и даже как работать в особых средах. Специализированный дизайн и т. д. Этот процесс требует тесного взаимодействия между дизайнерами и интерфейсными разработчиками.
Шаг 3. Визуальный дизайн. Импортируйте изображения на соответствующее устройство для проведения простых тестов, которые помогут нам как можно раньше обнаружить проблемы с доступностью, читаемостью и т. д.
По сравнению с традиционной веб-разработкой страницы с адаптивным дизайном имеют изменения в макете страницы и размере контента, поэтому окончательный результат, скорее всего, будет сильно отличаться от черновика дизайна, что потребует большего взаимодействия между разработчиками интерфейса и дизайнерами.
2. Адаптивные шрифты
Сравнение нескольких разных модулей в CSS
пикс: Пиксель. Относительная единица длины, размер определяется разрешением экрана. (сотрудничество с запросами СМИ)
em: относительная единица длины. Эквивалентен размеру шрифта текста внутри текущего объекта или относительно размера шрифта браузера по умолчанию, если текущий размер шрифта для встроенного текста не установлен. Значение em не фиксировано, оно наследует размер шрифта родительского элемента. Все немодифицированные браузеры соответствуют: 1em=16px. Тогда 12 пикселей=0,75em, 10px=0,625em. Чтобы упростить преобразование размера шрифта, вам необходимо объявить Font-size=62,5% в селекторе тела в CSS, в результате чего значение em станет 16px*62,5%=10px, поэтому 12px=1.2em, 10px=1em То есть вам нужно всего лишь разделить исходное значение пикселей на 10, а затем изменить единицу измерения на em.
rem: новая относительная единица в CSS3. Основное отличие от em заключается в том, что при использовании rem для установки размера шрифта для элемента это по-прежнему относительный размер, но только относительно корневого элемента HTML. Можно сказать, что этот блок сочетает в себе преимущества относительного размера и абсолютного размера. С его помощью вы можете пропорционально настроить все размеры шрифта, изменяя только корневой элемент, и избежать цепной реакции послойного объединения размеров шрифта. В настоящее время все браузеры, кроме IE8 и более ранних версий, поддерживают rem. Для браузеров, которые его не поддерживают, решение очень простое: написать дополнительный оператор абсолютной единицы. Эти браузеры игнорируют размеры шрифтов, установленные с помощью rem.
%: Кроме того, мы также можем использовать проценты для указания размера, который представляет собой кратное значение текущего шрифта относительно размера шрифта браузера по умолчанию. Эта единица измерения также часто используется в адаптивном дизайне страниц.
html{font-size:62.5%;/* 10÷16=62.5% */}body{font-size:12px;font-size:1.2rem;/* 12÷10=1.2 */}p{font-size :14px;размер шрифта:1.4rem;}Следует отметить, что для совместимости с браузерами, которые не поддерживают rem, нам нужно написать соответствующее значение px перед rem, чтобы браузеры, которые его не поддерживают, можно было корректно понизить версию. Фактически, вам не нужно слишком беспокоиться о том, использовать ли размер шрифта по умолчанию: 100% или установить размер шрифта: 62,5%. Если вы используете инструмент предварительной обработки CSS, вы, естественно, можете использовать значение по умолчанию. Если вы используете размер шрифта: 62,5% по другим причинам. В этом нет ничего плохого, вы можете сбросить его обратно к размеру шрифта по умолчанию, который вам нужен в теле.
3. Адаптивная обработка изображений и видео.
http://alistapart.com/d/Response-web-design/ex/ex-site-flexible.html#
1. Фоновое изображение — медиа-запрос.
2. Сжижение изображения ---- эластичное изображение
img, объект {max-width: 100%;}https://www.filamentgroup.com/examples/Response-images/3.HTML5 элемент <picture>
Элемент HTML5 <picture> может устанавливать несколько изображений.
Поддержка браузера
<picture> <source srcset=images/img_smallflower.jpg media=(max-width: 400px)> <source srcset=images/img_flowers.jpg> <img src=images/img_flowers.jpg style="margin: 0px; отступ: 0 пикселей; контур: нет; высота строки: 25,2 пикселей; размер шрифта: 14 пикселей; ширина: 660 пикселей; переполнение: скрыто; семейство шрифтов: tahoma, arial, Microsoft YaHei;"><script src=http://cdn.gbtags.com/picturefill/2.0.0/picturefill.min.js></script>4. Используйте теги noscript для создания адаптивных изображений.
Js динамическая загрузка больших и маленьких картинок
<span class=img-placeholder></span><noscript data-mobilesrc=small.jpg data-fullsrc=big.jpg data-alttext=ваш замещающий текст class=responsivize> <img src=big.jpg></noscript > <script type=text/javascript>var ResponseImageTag = { replaceInitialImages:function(respons) {var Platform = Desktop; resImage = '.'+respons; var ResponseImages = $(resImage); var i, noOfResponseImages = ResponseImages.length; //Текущая проверка ширины устройства отображения if(screen.width <= 767){ //767px, меньше, чем у iPad. все думают, что это мобильная платформа = mobile } //устанавливаем исходный элемент изображения for(i = 0; i < noOfResponseImages; я = я + 1) { вар noScriptElem = $(ResponseImages[i]); вар img = window.document.createElement(img); img.alt = noScriptElem.attr(data-alttext); = mobile){ img.src = noScriptElem.attr(data-mobilesrc }else{); img.src = noScriptElem.attr(data-fullsrc); } img.className = отзывчивый; $('.img-placeholder').eq(i).html('').append(img); noScriptElem.hide( } }};ResponseImageTag.replaceInitialImages('responsivize');$(window).resize(function(){); ResponseImageTag.replaceInitialImages('responsivize');});</script>4. Адаптивная структураКастомизация: Если ваш веб-сайт имеет большое количество разнообразных дизайнов, то, если вы все еще хотите использовать начальную загрузку, вам необходимо изменить структуру как нижний уровень: необходимо копировать большое количество стилей, а иерархия CSS сбивает с толку и сложно поддерживать.
В некоторых ситуациях бутстрап очень полезен. Например, если вы хотите быстро создать относительно красивый личный веб-сайт, корпоративный веб-сайт, интерфейс управления серверной частью блога и другие проекты, не требующие высокой настройки страниц, они часто больше подходят для серверных проектов. Большинство браузеров серверной системы хорошо совместимы. стили уступок и не легко вникать в детали. Или вы можете быть неопытны в создании внешнего интерфейса веб-сайта, учитывая совместимость браузера и бесчисленные размеры устройств. Bootstrap решит за вас множество проблем.