Интерфейсная адаптация: решение для мобильной/веб-адаптации

HTML

Популярная наука:

Динамическая адаптация фактически относится к обработке адаптации, где требуется адаптация, а не глобальная, адаптируются все элементы;

rem

rem是CSS3新增的一个相对单位（root em，根em）这个单位与em有什么区别呢？
区别在于
1.使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
2.这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁
3.除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。
这些浏览器会忽略用rem设定的字体大小。比如：p{font-size:14px;font-size:0.875rem;}

(推荐一个单位转换的工具：http://pxtoem.com/)

1. С помощью медиа-запросов: медиа-запросы css3

media queries :主要通过查询不同的宽度来执行不同的css代码，最终以达到界面的配置。
核心语法：
@media screen and(max-width:600px){
	/**
		*/
	html{
	 font-size:32px;
	}
}

преимущество:

  • медиа-запрос может судить о соотношении пикселей устройства, метод прост и недорог, особенно при поддержке одного и того же набора кода на ПК и мобильных терминалах; структура Bootstrap использует этот макет;
  • При настройке ширины экрана может реагировать без обновления страницы;
  • Изображение легко изменить, нужно только изменить файл CSS;

недостаток:

  • Большой объем кода, неудобно поддерживать - Чтобы принять во внимание большой экран или устройство высокой четкости, это приведет к трате других ресурсов устройства, особенно загрузки ресурсов изображения.
  • Чтобы принять во внимание соответствующие эффекты отзывчивого отображения мобильного терминала и ПК-терминала, неизбежно теряются их уникальные методы взаимодействия.

2. Версия Taobao с сенсорным экраном использует макет гибкого блока для адаптации к мобильным устройствам:

Flex гибкий макет, представленный домашней страницей Taobao с сенсорным экраном + ширина: 100% процентная единица, место, которое не нужно адаптировать, по-прежнему находится в единицах px;

Вот пример:Версия с сенсорным экраном Taobao

Под iphone6/7/8:Нижняя панель вкладок, позиция: фиксированное позиционирование, отображение: flex, макет блока, flex-direction: строка, justify-content: пробел между

Под iPad:В средней колонке категории: с position:absolute;display:flex;flex-direction:column;flex box

Команда разработчиков Jingdong Mall также использует тот же метод адаптивной верстки в мобильном терминале/веб-терминале:Команда разработчиков Jingdong

По моему личному мнению, макет flex box с его преимуществами гибкости и удобства занимает основное место в макете адаптации;Метод макета flex+vw / Метод макета flex+процентБолее популярен среди фронтенд-разработчиков

3. rem+увеличение видового экрана

根据屏幕宽度设定rem值，需要适配的元素都使用rem单位，不需要适配的元素还是使用px单位。1em=16px;

Принцип реализации:

1.根据rem将页面放大dpr倍, 然后viewport设置为1/dpr.

如iphone6 plus的dpr为3, 则页面整体放大3倍, 
1px(css单位)在plus下默认为3px(物理像素) 

然后viewport设置为1/3, 这样页面整体缩回原始大小. 从而实现高清。

Таким образом, когда вся веб-страница отображается на устройстве, ширина страницы будет равна размеру логического пикселя устройства, то есть ширине устройства. Формула расчета этой ширины устройства: физическое разрешение устройства/(devicePixelRatio * масштаб), Когда масштаб равен 1, ширина устройства = физическому разрешению устройства/devicePixelRatio.

Категории