Адаптация мобильного терминала vw vh

Мало знаний, большой вызов! Эта статья участвует в "Необходимые знания для программистов«Творческая деятельность.

Эта статья также участвует "Проект "Звезда раскопок"" , чтобы выиграть творческие подарочные наборы и бросить вызов творческим поощрениям

Схема адаптации

remКод адаптера:

<script>
    var html = document.documentElement;
    var widths = html.clientWidth;
    var num = 10;
    html.style.fontSize = widths / num + 'px';
</script>

Однако не все умеют писатьJSДа есть ли какой план, можем не писатьJSШерстяная ткань?还是真的有，我们来看下。

`vw`,`vh`

Совместимость: IE9 и выше, IOS 6.1+, Android 4.4+

Эти две единицы рассчитываются в соответствии с экраном окна просмотра, поэтому при использовании ПК обратите внимание на полосу прокрутки~

Давайте посмотрим на картинку ниже:

Примечание. Независимо от того, является ли устройство альбомным или портретным,vwотносится к горизонтальному направлению.vhотносится к вертикальному направлению

Он отличается от процента, который не будет затронут шириной родителей, поэтому мы проходимcssВы можете получить текущую ширину области просмотра, используяПолученная ширина области просмотра / 100vw

html{
    font-size: 10vw;
}
/* 因为整个屏幕是 100vw ，这里我们分成 10 个格子，一个格子是 10vw 的 font-size */

В этом случае из-за изменения ширины экранаfont-sizeтакже будет динамически изменяться.

div{
    width:5rem;
    height:5rem;
}

Выше и мы изначально писалиJS

div{
    width:50vw;
    height:50vw;
}

vwа такжеvhvminа такжеvmax

vmin: Выберитеvwа такжеvhсредние и маленькие

vmax: Выбратьvwа такжеvhсредний и крупный

Конечно, это решение не идеально, потому что в процессе вычисления также будут появляться десятичные точки.

Есть дыра, которую мы не можем заполнить прямо сейчас

Поле мобильного ввода заблокировано клавиатурой
проблема с кликами
Конфликт прокрутки (карусель и полоса прокрутки)
Контент запрещен, масштаб недействителен

Плагин для мобильных устройств

лучшая прокрутка (js)
библиотека анимации animate.css
инструмент салфетки

lib-flexible

Инструмент для rem-адаптации, код в нем фактически такой же, как и в rem-адаптации, которую мы написали

ссылка на скачивание:GitHub.com/Ah Trouble/Церковное право…

Нравится и поддержите, оставьте в руке стойкий аромат, и будьте почитаемы, шевелите своими ручонками, чтобы заработать состояние, спасибо, что оставили свои следы.