Схема адаптации мобильного терминала на базе webpack

внешний интерфейс Webpack
Схема адаптации мобильного терминала на базе webpack

В процессе разработки мобильного терминала одной из самых распространенных проблем является адаптация к разной ширине экрана. В настоящее время более распространенными схемами адаптации являются rem и vw, которые являются относительными единицами в css.

rem

Определение rem, данное W3C, — это размер шрифта корневого элемента, который является единицей, определяемой только относительно размера шрифта корневого элемента (элемента HTML) браузера, то есть для моделей разной ширины. необходимо только для расчета размера шрифта соответствующего корневого элемента, и тот же код css можно использовать для достижения пропорциональной адаптации. Рассмотрим простейший случай:

  • фрагмент html-кода
//移动页面中不可少的meta,将设备屏幕的宽度设置成将文档宽度
<meta name="viewport" content="width=device-width, initial-scale=1，user-scalable=0">
  • фрагмент кода js
//根据文档宽度计算根元素的字体大小,以文档宽度的1/10为例，如果屏幕宽度为375，那么根元素font-size就为37.5px
var w = document.documentElement.clientWidth;
document.documentElement.style.fontSize = w / 10 + 'px';
  • фрагмент кода css
//此时如果在css中写
.div{
  width: 2rem;
}
//那么这个div的宽度就是75px，同理如果屏幕宽度为360，那么div就宽72px。
//日常开发中，比较常见的设计稿是750px，在设计稿中一个区域的高度为30px的话，
//在css中写成 height：0.4rem（30/75），就能完成等比缩放

В реальной разработке мы обычно используем плагины для реализации rem-адаптации при сборке веб-пакета:postcss-pxtoremа такжеlib-flexible.

Установить:npm i postcss-pxtorem --Dа такжеnpm i amfe-flexible --S

  • существуетwebpack.config.jsНастройте postcss-загрузчик в
module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.join(__dirname,"/dist"),
        filename: "bundle.js"
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                use:  ['style-loader','css-loader','postcss-loader']  //配置postcss-loader
            }
        ]
    },  
}
  • Создайте новый проект в корневом каталоге проекта.postcssrc.jsфайл, в котором записана конфигурация плагина postcss-pxtorem
module.exports = {
  "plugins": {
    "postcss-pxtorem": {
        rootValue: 75,                   //750的设计稿
        propList: ['*']
     }
   }
}
  • Файл записи js, указанный в записи ("./src/index.js") представил lib-flexible
import 'amfe-flexible'

Таким образом, вы можете напрямую написать абсолютное значение пикселя в черновике дизайна в CSS, например,div#testВ проекте дизайна 750 ширина составляет 200 пикселей, поэтому его можно написать напрямую без преобразования.

#test{
  width: 200px
}

vw

Другим решением является использование vw: 1% ширины окна просмотра, что соответствует ширине видимой области браузера.

//移动页面中不可少的meta,将设备屏幕的宽度设置成将文档宽度
<meta name="viewport" content="width=device-width, initial-scale=1，user-scalable=0">

На мобильной стороне, если настроеноwidth = device-width, то 100vw — это ширина экрана.

Используя макет vw, нет необходимости динамически устанавливать размер шрифта корневого элемента в js, как rem, а напрямую относительно ширины экрана. Например, в дизайн-проекте 750 ширина div составляет 200 пикселей, тогда вы можете написать:width: 200 / 750 * 100 vw

И с веб-пакетом мы можем использоватьpostcss-px-to-viewportплагин для достижения:

Установить:npm i postcss-px-to-viewport --D

  • как указано выше ремwebpack.config.jsНастройте postcss-загрузчик.
  • Создайте новый проект в корневом каталоге проекта.postcssrc.jsфайл, в который нужно записатьpostcss-px-to-viewportКонфигурация плагина
module.exports = {
  "plugins": {
    'postcss-px-to-viewport': {
        viewportWidth: 750                 //750的设计稿
     }
   }
}

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

Адаптация к сторонним фреймворкам пользовательского интерфейса

Иногда мы используем другие библиотеки компонентов на мобильной стороне и ссылаемся на сторонние UI-фреймворки, такие как vant и mint-ui, потому что сторонние фреймворки используют единицы измерения px на основе черновика дизайна 375px, если наш проект имеет дизайн 750px. draft, вы не можете использовать один и тот же viewportWidth для адаптации.

В это время вы можете.postcssrc.jsв следующей конфигурации (сvwНапример,remтоже похоже):

const path = require('path')
module.exports = ({file}) => {

  //如果使用vant UI框架
  const width = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750; 
  
  return {
    "plugins": {
      "postcss-px-to-viewport": {
        viewportWidth: width,
      }
    }
  }
}

Эпилог

И rem, и vw являются широко используемыми решениями для адаптации мобильных терминалов. Разница между ними заключается в первую очередь в совместимости, rem может быть совместим со старыми версиями браузера, см. веб-сайт caniuse.caniuse.com/; Во-вторых, в rem нужно вычислять размер шрифта корневого элемента через js, а vm реализован на чистом css.

Категории