Что такое адаптивный макет?
Адаптивный макет означает, что одна и та же страница имеет разные макеты на экранах разных размеров. Сегодня, когда мобильный Интернет очень развит, веб-страницы, которые мы разрабатываем в настольных браузерах, больше не могут удовлетворить потребности просмотра на мобильных устройствах. Традиционный метод разработки заключается в разработке одного набора страниц для ПК и другого набора страниц для мобильных устройств. Но это очень хлопотно. Поскольку разных терминалов становится все больше, вам нужно разрабатывать несколько разных версий страницы. Чтобы использовать адаптивный макет, вам нужно разработать только один набор. ИтанМаркотт предложил концепцию адаптивного макета в мае 2010 года. Короче говоря, веб-сайт может быть совместим с несколькими терминалами.
Разница между адаптивной разработкой и отдельной разработкой для мобильных устройств и ПК: адаптивная разработка пишет только набор интерфейсов и отображает разные макеты и контент, определяя разрешение области просмотра и выполняя обработку кода на клиенте для разных клиентов. Мобильный терминал и терминал ПК разрабатываются отдельно. Определяя разрешение области просмотра, он может определить, является ли текущее устройство, к которому осуществляется доступ, ПК, планшетом или мобильным телефоном, тем самым запрашивая сервер и возвращая разные страницы.
В чем заключается принцип адаптивного развития?
Принцип адаптивной разработки заключается в использовании Media Query в CSS3 для установки разных макетов и стилей для устройств разной ширины для адаптации к разным устройствам.
Определение и использование запроса SS3 @media:
Используя запрос @media, вы можете определить разные стили для разных типов мультимедиа. @media может устанавливать разные стили для разных размеров экрана, особенно если вам нужно настроить адаптивную страницу, @media очень полезен. При сбросе размера браузера страница также будет перерисована в зависимости от ширины и высоты браузера.
Например, если ширина экрана меньше 500 пикселей, измените цвет фона на красный.
Для реализации адаптивного макета обычно используются следующие методы:
(1) Используйте медиа-запросы в CSS (самый простой);
(2) Используйте JavaScript (стоимость использования относительно высока);
(3) Используйте сторонние платформы с открытым исходным кодом (например, bootstrap, который может поддерживать различные браузеры).
Установить метатег
Во-первых, нам нужно установить метатег, чтобы сообщить браузеру, что ширина области просмотра (видимой области веб-страницы) равна ширине устройства и запретить пользователю увеличивать масштаб страницы, поскольку показано ниже:
<metaname=viewportcontent=width=ширина устройства,начальный масштаб=1,максимальный масштаб=1,масштабируемый пользователем=нет>
При настройке области просмотра необходимо обратить внимание. Область просмотра — это размер видимой области веб-страницы. При настройке области просмотра просто задайте ширину. Вам не нужно заботиться о конкретной высоте. высота автоматически увеличивается за счет содержимого веб-страницы. Значение содержимого метатега выше следующее:
● область просмотра: область просмотра, представляющая видимую область веб-страницы;
●ширина: управляет размером области просмотра. Вы можете указать конкретное значение, например 600, или специальное значение, состоящее из ключевых слов. Например, ширина устройства представляет ширину устройства.
●начальный масштаб: указывает начальный коэффициент масштабирования, который является коэффициентом масштабирования при первой загрузке страницы;
●Максимальный масштаб: указывает максимальный коэффициент, который пользователю разрешено увеличивать, в диапазоне от 0 до 10,0;
●минимальный масштаб: указывает, что пользователям разрешено масштабирование до минимального масштаба в диапазоне от 0 до 10,0;
● Масштабируемое пользователем: указывает, может ли пользователь масштабировать вручную: «да» означает, что масштабирование разрешено, «нет» означает, что масштабирование запрещено.
запросы СМИ
Медиа-запросы CSS могут определять разные стили CSS для разных типов мультимедиа (экранной печати) на основе заданных условий, чтобы пользователи, использующие разные устройства, могли получить наилучшие впечатления.
Используйте HTML в качестве примера:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1><title>Вводное руководство по адаптивной странице: Альберт Янг</title><linkrel =stylesheethref=style.css><linkrel=stylesheethref=https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.cssintegrity=sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcO QV nNcrossorigin=anonymous>< / head><body><header><ahref=#>AlbertYang</a><ul><li><ahref=#>Главная страница</a></li><li><ahref=#>Блог</a><ul><li><ahref=#>Главная страница</a></li><li><ahref=#>Блог</a><ul><li><ahref=#> a </li><li><ahref=#>Свяжитесь со мной</a></li><li><ahref=#>Доска объявлений</a></li><li><ahref=#> Обо мне</a></li><li><ahref=#>Фотостена</a></li></ul><div><inputtype=textplaceholder=Search><iclass=fafa-searcharia-hidden = true></i></div></header><div><div><h2>Адаптивный макет</h2><p>Адаптивный макет означает, что одна и та же страница имеет разные макеты для экранов разных размеров . Традиционный метод разработки заключается в разработке одного набора для ПК и другого для мобильного телефона. Однако при использовании адаптивного макета вам нужно разработать только один набор. Разница между адаптивным дизайном и адаптивным дизайном: адаптивный дизайн разрабатывает набор интерфейсов и отображает различные макеты и контент, определяя разрешение области просмотра и выполняя обработку кода на стороне клиента для разных клиентов. Адаптивный дизайн требует разработки нескольких наборов интерфейсов; , путем определения разрешения области просмотра определяется, является ли текущее устройство, к которому осуществляется доступ, ПК, планшетом или мобильным телефоном, тем самым запрашивая уровень обслуживания и возвращая разные страницы. Медиа-запросы CSS3 позволяют нам определять разные стили для разных типов мультимедиа. При сбросе размера окна браузера страница также будет перерисована в зависимости от ширины и высоты браузера. </p><ahref=#>Читать полный текст</a></div><imgsrc=img.png></div></body></html>
Результаты запуска:
Ниже приведен подробный пример, демонстрирующий реализацию адаптивного макета:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Адаптивный макет</title><metaname=viewportcontent=width=device-width,initial-scale=1.0,maximum-scale=1, user -scalable=no/><style>*{margin:0px;padding:0px;font-family:Microsoft Yahei;}#head,#foot,#main{height:100px;width:1200px;/*width: 85% ;*/background-color:goldenrod;text-align:center;font-size:48px;line-height:100px;margin:0auto;}#headdiv{display:none;font-size:20px;height:30px ;width :100px;background-color:green;float:right;line-height:30px;margin-top:35px;}#headul{width:80%;}#headulli{width:20%;float:left;text -align :center;list-style:none;font-size:20px;}#main{height:auto;margin:10pxauto;overflow:hidden;}.left,.center,.right{height:600px;line-height:600px ;float:left;width:20%;background-color:red}.center{width:60%;border-left:10pxsolid#FFF;border-right:10pxsolid#FFF;box-sizing:border-box }@; mediaonlyscreenand(max-width:1200px){#head,#foot,#main{width:100%;}}@mediaonlyscreenand(max-width:980px){.right{display:none;}.left{ширина: 30% ;}.center{width:70%;border-right:hidden;}}@mediaonlyscreenand(max-width:640px){.left,.center,.right{width:100%;display:block;height: 200px; line-height:200px;}.center{border:hidden;border-top:10pxsolid#FFFFFF;border-bottom:10pxsolid#FFFFFF;height:600px;line-height:600px;}#headul{display:none }# headdiv{display:block;}}</style></head><body><div><headerid=head><ul><li>header1</li><li>header2</li><li>header2 </li><li>header2</li><li>header2</li></ul><div>icon</div></header><sectionid=main><divclass=left>left</div ><divclass=center>по центру</div><divclass=right>справа</div></section><footerid=foot>нижний колонтитул</footer></div></body></html>Результаты запуска:
