Подробное объяснение использования rem+scss для адаптации на мобильном телефоне.

rem (размер шрифта корневого элемента) относится к единице размера шрифта относительно корневого элемента (т. е. элемента html).

Предполагая, что размер шрифта корневого элемента равен 10 пикселей, размер 5rem равен, например, 5*10=50 пикселей.

 html{ размер шрифта: 10 пикселей;}p { ширина: 2рем; /* 2*10 = 20 пикселей;*/ поле: 1рем;}

Раньше мы часто использовали эту страницу: установили ширину области просмотра на ширину устройства, а затем выбрали минимальную ширину устройства, с которым мы должны быть совместимы (обычно 320 пикселей). Создавайте страницы на основе этой минимальной ширины. В единицах измерения используются пиксели и проценты. На устройствах с разной шириной размер шрифта и размер контента страницы одинаковы. Разница в том, что разрыв между контентом на большом экране больше, чем на маленьком. Недостатком этого является то, что страница плохо отображается на устройствах определенных размеров.

Если мы используем rem для создания страницы, мы установим разные размеры шрифта для корневого элемента в соответствии с разной шириной устройства. Чем шире ширина, тем больше размер шрифта. Затем используйте rem для замены исходного px. Таким образом, размер шрифта, размер контента и пара становятся больше по мере увеличения ширины экрана.

Во-первых, js устанавливает размер шрифта html по умолчанию (написанный в заголовке html).

 <script type=text/javascript> var bodyElement = document.documentElement || document.body, RC = { w: 750, h: 1206 }, // Ширина и высота черновика по умолчанию GC = { w: document.documentElement.clientWidth | | window.innerWidth || screen.width, h: document.documentElement.clientHeight || window.innerHeight || screen.height }; функция setFontSize() { var rightSize = parseFloat((RC.w / RC.h).toFixed(1)), currentSize = parseFloat((GC.w / GC.h).toFixed(1)) ,lastHTMLSize = 16, // Значение по умолчанию 16, потому что размер шрифта html по умолчанию составляет 16 пикселей html = document.getElementsByTagName(html)[0]; if(rightSize > currentSize){ // Длинный экран LastHTMLSize = 16; }else if(rightSize < currentSize){ // Широкий экран LastHTMLSize = (RC.h / GC.h * GC) .w)/RC.w * 16 } html.style.fontSize = GC.w/lastHTMLSize + 'px'; } setFontSize();</script>

Установите для scss-файла px значение rem

 // Значение по умолчанию 16 — это размер шрифта HTML по умолчанию // Значение по умолчанию 750 — это ширина черновика проекта по умолчанию // $n — расстояние, измеренное от черновика проекта @charset UTF-8; @function rem($n) { @return $n / (750 / 16)+rem;}

Редактируйте функции для удобного вызова:

 @function getTop($n) { @return ($n - 1206 / 2) / (750 / 16)+rem;} @function getLeft($n) { @return ($n - 750 / 2) / (750 / 16)+rem;}@function getRight($n) { @return (($n - 750) / 2) / (750 / 16)+rem;}@mixin center($left, $top) { //Изменить позицию: Absolute; left: 50%; top: rem($top); маржа: 0 0 0 getLeft($left) ;}@ mixin centerlt($left, $top) { //Вверх и вниз, влево и вправо по центру: абсолютное левое: 50%; верхнее: 50%; getTop($top) 0 0; getLeft($left);}@mixin centerrt($right, $top) { //Вверх и вниз, влево и вправо по центру: абсолютное; правое: 50%; верхнее: 50%; поля: getTop($top) getRight ($right) 0 0;}@mixin middlert($right, $top) { //Изменить положение вверх, вниз, по центру, вправо: Absolute; right: rem($right); top: 50%; getTop( $топ) 0 0 0;}@mixin centerb($left, $bottom) { //Изменить позицию: абсолютное; левое: 50%; нижнее: rem($bottom); маржа: 0 0 0 getLeft($left); leftTop($left, $top) { //Изменить позицию слева на верхнюю: Absolute; left: rem($left); top: rem($top);}@mixin rightTop($right, $top) { //Изменить положение вправо: Absolute; right: rem($right); top: rem($top);}@mixin leftBottom($left, $bottom) { //Изменить положение вправо: Absolute; слева: рем($слева); внизу: рем($дно);}

Вызовите вышеуказанную функцию (расстояние по ширине и высоте может быть измерено в пс для измерения фактического расстояния. Ширина проектного чертежа по умолчанию составляет 750):

 .page1-img1{ширина: rem(473); высота: rem(173); @include centerlt(139, 767);}

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.