Script для преобразования css-листа из px в em

Ответ 1

Вы не можете разумно обменивать px и em такие размеры. Размер пикселя - это абсолютное значение, которое останется того же размера, независимо от того, где он находится. Размер em относительно родительского элемента, поэтому 0.5em - это половина размера родительского элемента. Если это не имеет большого смысла, рассмотрим следующий фрагмент кода:

/* CSS */
span { font-size: 0.9em; }

<!-- HTML -->
<span>Testing,
    <span>Testing,
        <span>Testing</span>
    </span>
</span>

В этом примере вы обнаружите, что слово "Тестирование" становится все меньше и меньше, потому что размер шрифта каждого тега span составляет 90% от предыдущего.

Для тега body размер шрифта 1em примерно эквивалентен 16px, но это единственный раз, когда вы можете разумно перевести один размер в другой

Ответ 2

Скопируйте/Вставьте свой css в JSFiddle для преобразования. Пример кода:

var regFindPX = new RegExp('(\\d+)px','g');
var reg3decPoints = new RegExp('(\.\\d{3}).*', '');

var css = 'css code';
var result;
while ((result = regFindPX.exec(css)) !== null) {
    var px = parseInt(result[1]);
    var em = px / 16;
    em = em.toString().replace(reg3decPoints, '$1');
    css = css.replace(px + 'px', em + 'em'); 

}

Ответ 3

Вы можете сделать это легко в Perl:

perl -p -i -e 's/(\d+)px/($1\/16).em/ge' stylesheet.css

Ответ 4

Я опрокинул это awk:

#!/bin/awk -f

BEGIN {
    bfs = 16;
}

{
    while (match($0, /([0-9]+\.)?[0-9]+px/)) {
        num = substr($0, RSTART, RLENGTH - 2);
        #print("numval: ", numval);
        $0 = substr($0, 1, RSTART-1) (num != 0 ? (1 / bfs) * num: 0 ) "em" substr($0, RSTART + RLENGTH);
  }
}

1

Вы можете использовать его для замены любых записей в пикселях в файле с подходящими преобразованиями. Обратите внимание, что bfs должен быть установлен на размер базового шрифта (16 в этом случае), который вы хотите использовать. Также обратите внимание, что для правильного использования вы должны обладать навыками оболочки.

Ответ 5

Я понимаю, что это старый поток, но я подумал, что это может помочь кому-то:

Преобразование px в em: target ÷ context = result

Пример:

Чтобы найти значение 1px и скажем, что размер шрифта для контейнера равен 16px, уравнение будет следующим:

1 ÷ 16 = 0,0625 ~

(Лучше всего округлить до ближайшей тысячной).

1px = 0.063em

Из этого вы также можете найти другие измерения по цели * em_value = result

Пример:

10 *.063 =.63

10px =.63em

Я надеюсь, что это имеет смысл и помогает кому-то.

Ответ 6

Как отмечает Джеймс, проблема с любым прямолинейным конвертером заключается в том, что таблица стилей не знает, какие элементы вложены. Поскольку значения em являются относительными, вычисляемый font-size будет варьироваться в сильно вложенных элементах. Вам понадобится инструмент, который сканирует вывод HTML после его визуализации и рекурсивно корректирует соответствующие стили.

Я написал компонент JavaScript, который может оказаться полезным в этом отношении. Вы можете захватить его здесь.

Рекомендуемым рабочим процессом было бы вызвать emify(document.body) в браузере, а затем извлечь соответствующие значения em и вставить его обратно в ваш css.

Не идеально, но это один из способов сделать это с точностью.

Ответ 7

Из предыдущего обсуждения кажется, что онлайн-генератор не существует, верно? Я не мог найти тот, который будет анализировать всю таблицу стилей.

Во-первых, если em применяется и изображение или ввод, кроме шрифта внутри ввода, будут ли они относительными, и если да, то что и как? Изображения не могут быть вложенными, и мне нелегко видеть, что они относятся к каждой ширине родительского div. (Преобразование ради CSS PIE, чтобы избежать ошибок, это вдохновляет).

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

Работа с CSS сама по себе не может сделать трюк, поскольку невозможно знать, какие элементы будут вложены. Поэтому потребуется сканирование вывода html. Какой лучший способ сделать это? Единственный способ, которым я мог подумать, - применить все стили inline, которые generator был сделан для конвертировать шаблоны для писем и т.д. Когда стили встроены, это покажет, как все вложенное. Из этого сравните с таблицей стилей.

Сравните каждый вложенный элемент с "em" с любым родительским элементом с "em", чтобы сгенерировать px соответственно, и у меня уже есть средство регулярного выражения для анализа CSS, что упрощает его.

Одна проблема заключается в том, что класс может быть вложен в разные элементы, причем em в одном классе становится другим в этом контексте, поэтому невозможно преобразовать в px и применять одно и то же. Единственное решение, я считаю, состоит в том, чтобы воссоздать вложенную структуру или часть в листе css для применения соответственно px в любое время, когда размер шрифта отличается в контексте.

Например:

<code>
    // Original Stylesheet
    .mainClass{font-size:1em;}

    // HTML
    <div id="outerNest" style="font-size:.5em;">
        <div class="mainClass"> Font here is .5em </div>
    </div>

    <div class="mainClass> Font here is 1em</div>

        // New stylesheet 
    .mainClass{font-size:16px;}

    // newly created styles to work with px conversion
    #outerNest .mainClass{font-size:8px;}
</code>

а. Считаете ли вы, что это может сработать? B. Есть ли лучший способ? C. Стоит ли это того? Я мог бы использовать его один раз в синей луне в некоторых случайных ситуациях, но я сомневаюсь, что многие люди найдут его в любой ценности. Или есть ситуация, в которой это было бы удобно, когда люди сталкивались здесь и там?