成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

[原簡書]將內(nèi)聯(lián)樣式的px轉(zhuǎn)化為rem

mindwind / 3137人閱讀

摘要：顯然，編輯器復(fù)制過去的代碼的樣式是內(nèi)聯(lián)樣式，但我們的是將文件統(tǒng)一處理，單位轉(zhuǎn)化為實現(xiàn)自適應(yīng)布局。由于內(nèi)聯(lián)樣式無法被轉(zhuǎn)化，所以該需求簡化為就是將內(nèi)聯(lián)樣式的轉(zhuǎn)化為。

將之前寫在簡書的文章搬過來，荒廢了一段時間，抓緊時間充電

最近有個需求，運(yùn)營希望將135編輯器里面的排版可以復(fù)制到我們自己的后臺，在app端實現(xiàn)排版樣式的多樣化。顯然，135編輯器復(fù)制過去的代碼的樣式是內(nèi)聯(lián)樣式，但我們的H5是將css文件統(tǒng)一處理，單位px轉(zhuǎn)化為rem,實現(xiàn)自適應(yīng)布局。由于內(nèi)聯(lián)樣式無法被轉(zhuǎn)化，所以該需求簡化為就是將內(nèi)聯(lián)樣式的px轉(zhuǎn)化為rem。

參考微信的weixin/posthtml-px2rem的方式，稍微改寫一下
通過posthtml處理html,再利用posthtml-attrs-parser插件提取style屬性，最后利用正則表達(dá)式實現(xiàn)轉(zhuǎn)化

// pxToRem.js
"use strict";
var lodash = require("lodash");
var parseAttrs = require("posthtml-attrs-parser");
var posthtml = require("posthtml");

export default function (str, options) {
    var pxRegex = /(d*.?d+)px/ig;

    options = lodash.extend({
        rootValue: 16, // root font-size
        unitPrecision: 5, // numbers after `.`
        minPixelValue: 0 // set it 2 if you want to ignore value like 1px & -1px
    }, options);

    function createPxReplace(rootValue, unitPrecision, minPixelValue) {
        return function (m, $1) {

            // ignoring `PX` `Px`
            if (m.indexOf("px") === -1) {
                return m;
            }
            if (!$1) {
                return m;
            }
            var pixels = parseFloat($1);

            if (pixels < minPixelValue) {
                return m;
            }
            return toFixed((pixels / rootValue), unitPrecision) + "rem";
        };
    }

    function toFixed(number, precision) {
        var multiplier = Math.pow(10, precision + 1),
            wholeNumber = Math.floor(number * multiplier);
        return Math.round(wholeNumber / 10) * 10 / multiplier;
    }

    var pxReplace = createPxReplace(options.rootValue, options.unitPrecision, options.minPixelValue);

    return Promise.try(() => {
        return posthtml()
        .use(function(tree) {
           tree.match({attrs: {style: true}}, function (node) {
                var attrs = parseAttrs(node.attrs);
                for (var x in attrs["style"]) {
                    if (attrs["style"].hasOwnProperty(x)) {
                        var styleValue = attrs["style"][x];
    
                        // e.g. style="width=10px; width=20px;"
                        if (typeof styleValue == "object")
                            styleValue = styleValue[styleValue.length - 1];
    
                        var newStyleValue;
                        newStyleValue = styleValue.toString().replace(pxRegex, pxReplace);
    
                        attrs["style"][x] = newStyleValue;
                    }
                }
    
                node.attrs = attrs.compose();
                return node;
            });
        })
        .process(str)
        .then(function(result) {
            return result.html;
        })
    });
};

后端接口請求到的文章內(nèi)容是content: "

"類似這樣的字符串，將其格式化

import pxToRem from "px-to-rem.js";

pxToRem(str).then(res => { this.content = res; })

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108323.html

相關(guān)文章

  • 【整理】20個讓你效率更高的CSS代碼技巧

    摘要：使用進(jìn)行布局彈性布局的出現(xiàn)是有原因的。對于大型項目使用預(yù)處理器你一定聽說過它們。預(yù)處理器是的未來。舉個簡單的例子，下面是一個代碼的片段，它使用到了一些變量和函數(shù)預(yù)處理器的唯一的不足之處是它們?nèi)稳恍枰幾g 在本文中，我們想與您分享一個由各大CSS網(wǎng)站總結(jié)推薦的20個有用的規(guī)則和實踐經(jīng)驗集合。有一些是面向CSS初學(xué)者的，有一些知識點是進(jìn)階型的。希望每個人通過這篇文章都能學(xué)到對自己有用的知識...

    hqman 評論0 收藏0

  • 【整理】20個讓你效率更高的CSS代碼技巧

    摘要：使用進(jìn)行布局彈性布局的出現(xiàn)是有原因的。對于大型項目使用預(yù)處理器你一定聽說過它們。預(yù)處理器是的未來。舉個簡單的例子，下面是一個代碼的片段，它使用到了一些變量和函數(shù)預(yù)處理器的唯一的不足之處是它們?nèi)稳恍枰幾g 在本文中，我們想與您分享一個由各大CSS網(wǎng)站總結(jié)推薦的20個有用的規(guī)則和實踐經(jīng)驗集合。有一些是面向CSS初學(xué)者的，有一些知識點是進(jìn)階型的。希望每個人通過這篇文章都能學(xué)到對自己有用的知識...

    AlphaWatch 評論0 收藏0

  • 【整理】20個讓你效率更高的CSS代碼技巧

    摘要：使用進(jìn)行布局彈性布局的出現(xiàn)是有原因的。對于大型項目使用預(yù)處理器你一定聽說過它們。預(yù)處理器是的未來。舉個簡單的例子，下面是一個代碼的片段，它使用到了一些變量和函數(shù)預(yù)處理器的唯一的不足之處是它們?nèi)稳恍枰幾g 在本文中，我們想與您分享一個由各大CSS網(wǎng)站總結(jié)推薦的20個有用的規(guī)則和實踐經(jīng)驗集合。有一些是面向CSS初學(xué)者的，有一些知識點是進(jìn)階型的。希望每個人通過這篇文章都能學(xué)到對自己有用的知識...

    NoraXie 評論0 收藏0

  • HTML 1-樣式引入、路徑、尺寸單位

    摘要：樣式的引入方式樣式的引入有三種方式內(nèi)聯(lián)式，可直接寫在標(biāo)簽內(nèi)，一般不建議這種寫法。調(diào)試介紹主要用于對程序調(diào)試，相比于，僅在控制臺中打印相關(guān)信息，不會阻斷程序的執(zhí)行。 CSS樣式的引入方式 css樣式的引入有三種方式：1.css內(nèi)聯(lián)式，可直接寫在html標(biāo)簽內(nèi)，一般不建議這種寫法。 這里文字是紅色 2.css嵌入式，CSS代碼寫在標(biāo)簽中并放在head標(biāo)簽內(nèi) p{ font-si...

    Shihira 評論0 收藏0

  • HTML 1-樣式引入、路徑、尺寸單位

    摘要：樣式的引入方式樣式的引入有三種方式內(nèi)聯(lián)式，可直接寫在標(biāo)簽內(nèi)，一般不建議這種寫法。調(diào)試介紹主要用于對程序調(diào)試，相比于，僅在控制臺中打印相關(guān)信息，不會阻斷程序的執(zhí)行。 CSS樣式的引入方式 css樣式的引入有三種方式：1.css內(nèi)聯(lián)式，可直接寫在html標(biāo)簽內(nèi)，一般不建議這種寫法。 這里文字是紅色 2.css嵌入式，CSS代碼寫在標(biāo)簽中并放在head標(biāo)簽內(nèi) p{ font-si...

    laoLiueizo 評論0 收藏0

發(fā)表評論

0條評論

mindwind

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<