鍍金池/ 問(wèn)答/HTML5  Python  HTML/ transform的scale到底怎么寫的?

transform的scale到底怎么寫的?

最近做的項(xiàng)目里有一個(gè)做重構(gòu)的同學(xué)走了,然后重構(gòu)就自己寫了,然后遇到了常見的ios一像素問(wèn)題,雖然這個(gè)問(wèn)題網(wǎng)上已經(jīng)有答案了,但是在找答案的過(guò)程中遇到了一些疑問(wèn),經(jīng)過(guò)百度無(wú)果后在來(lái)這里找大牛解答。

網(wǎng)上給出的方案很多,但最多人使用的應(yīng)該是用js把viewport給重設(shè)或者使用css縮放,我采取了第二種方案。但發(fā)現(xiàn)了自己還是對(duì)transform這個(gè)屬性不了解,一般這個(gè)屬性的寫法是:

transform:scale(0.5);

但我找到一像素的寫法是這樣的:

transform(scale(0.5));

希望有大牛給我解答一下,這是找到一像素的寫法

        .radius-border{
            position: relative;
        }
        .radius-border:after{
            content: "";
            box-sizing: border-box;
            position: absolute;
            width: 85px;
            height: 26px;
            left: 0;
            top: 0;
            border-radius: 50px;
            border:1px solid rgba(42, 146, 235,0.3);
            -webkit-transform(scale(0.5));
            -webkit-transform-origin: 0 0;
            transform(scale(0.5));
            transform-origin: 0 0;
        }
        .radius-border .txt{
            position: absolute;
            left: 13px;
            top: 3px;
            font-size: 14px;
            color: #2A92EB;
        }
        
        <div class="radius-border">
            <span class="txt">向Ta提問(wèn)</span>
        </div>
回答
編輯回答
傻丟丟

在二分屏上,如果不做viewport級(jí)別的縮放,那么一個(gè)css像素將對(duì)應(yīng)兩個(gè)物理像素。但瀏覽器對(duì)‘0.5px’的‘理解’是不穩(wěn)定,。它可能會(huì)渲染成1物理像素,也有可能渲染成0。transfrom可以看成對(duì)元素的第二次繪制,這種繪制的在圖形圖像上更加精確。scale屬性,是形變。scale(0.5)會(huì)把 22個(gè)物理像素的圖像繪制成11個(gè)物理像素。

2017年12月12日 10:58
編輯回答
任她鬧

怎么樓上關(guān)心的重心都錯(cuò)了..(敲黑板!

題主想問(wèn)的是,我找到的這個(gè)方法為啥transform可以像函數(shù)一樣調(diào)用,這種食用方式?jīng)]見過(guò)呀
事實(shí)上,這種東西只要題主放在瀏覽器測(cè)試一下就知道結(jié)果了——transform(scale(0.5));在瀏覽器上根本就不生效(因?yàn)樗灰?guī)范)..

那么就得出了兩種結(jié)果:

  1. 原作者寫錯(cuò)了
  2. 實(shí)際上可能原作者使用的是css預(yù)處理,因此有這樣的語(yǔ)法。
2017年11月3日 19:18
編輯回答
歆久

看起來(lái)好像是預(yù)處理器的函數(shù)寫法,標(biāo)準(zhǔn)CSS我沒有找到這樣的寫法。

2018年8月4日 22:34
編輯回答
不二心

這是處理 2 倍屏的做法,將 border 縮小為 0.5 倍的尺寸,如果是 3 倍屏,就是 scale(0.3333)。

2017年7月16日 08:15