Адаптивное решение Rem PX2Rem-загрузчик + HotCSS

CSS

автор:codexu

Дизайнеры, как правило, предоставляют только набор эскизов дизайна одного размера Как внедрить набор кодов, чтобы обеспечить адаптацию к нескольким терминалам?

Демонстрация эффекта

Предполагая, что черновик дизайна имеет ширину 640 пикселей (iphone5), ширина элемента составляет: 320 пикселей, черезpx2rem-loader&hotcss.jsКод реализации толькоwidth: 320px, чтобы получить 1/2 экрана при любом размере экрана.

width: 320px;
height: 320px;

image

Как видно из приведенного выше рисунка, поpx2rem-loaderАвтоматически конвертировать 320px в 8rem.

width: 8rem;

а такжеhotcss.jsзатем вhtml标签добавлено в

<html lang="en" data-dpr="2" max-width="540" style="font-size: 40px;">

существуетhead标签добавлено в

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no">

Когда размер изменен на iphone6, вы можете видеть, что ширина по-прежнему 8rem, но фактический размер становится 375px.

image

настроить

Установите px2rem-загрузчик

npm i px2rem-loader

Используйте px2rem-loader после style-loader, css-loader.

{
    loader: 'px2rem-loader',
    options: {
        remUnit: 40,
        remPrecision: 8
    }
}

Вводится тегом сценария или импортом и т. д.hotcss.js, постарайтесь ввести как можно раньше.

Суммировать

Таким образом, для реализации многотерминальной адаптации требуется только один набор кода, а значение css может соответствовать черновому варианту проекта.

Категории