相信大家昨天打開(kāi)某 404 搜索引擎的時(shí)候應(yīng)該都看到這張圖片了,不得不說(shuō),后人會(huì)以這么一種方式來(lái)紀(jì)念前人,而且還是一個(gè)偉大的公司,挺感動(dòng)的。
前言
在開(kāi)發(fā) H5 頁(yè)面的時(shí)候發(fā)現(xiàn),部分安卓機(jī)的原生瀏覽器不兼容 0.5px 的 border ,這時(shí)候就很鬧心了,如下所示代碼:
input { border-bottom: 0.5px solid #DCDCDC;}使用 rem 改進(jìn)
后面想到了用 rem 的方式,因?yàn)?H5 頁(yè)面借鑒了手淘的響應(yīng)式像素,根據(jù)移動(dòng)設(shè)備的 dpi 設(shè)定了根元素的 font-size 大小,所以幾乎所有的 px 都改成了 rem 作為單位,這樣可以更好地去實(shí)現(xiàn)移動(dòng)端的響應(yīng)式像素以及 Retina 屏幕上的表現(xiàn)。代碼如下:
input { /* 47 是頁(yè)面根元素的 font-size 大小 */ border-bottom: calc(1rem/47) solid #DCDCDC;}測(cè)試中有部分機(jī)型完美展示了,但是有部分還是不顯示,網(wǎng)上有帖子說(shuō)可以利用偽元素 :before 和 :after 進(jìn)行 1px 的表現(xiàn),然后利用 transform: scaleY(0.5); 進(jìn)行高度上的調(diào)整,思路很好,但奶奶個(gè)熊 input 元素不支持偽元素。
最后,物色到了一個(gè)很妙的方法:在 CSS 中使用 svg!
css 中引入 svg 來(lái)改進(jìn)
具體思路是為元素加上 background-image ,然后把 svg 置為圖片類(lèi)型,因?yàn)?svg 上的 1px 就是實(shí)實(shí)在在的只占 1 個(gè)物理像素。
實(shí)現(xiàn)很簡(jiǎn)單,代碼如下:
input { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='0' y1='100%' x2='100%' y2='100%' stroke='#dcdcdc' stroke-width='1'/></svg>") ;}倒騰不止于此,利用 php 代碼把 svg 的 xml 代碼轉(zhuǎn)成 base64 格式再試試:
<?php echo base64_encode("<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='0' y1='100%' x2='100%' y2='100%' stroke='#dcdcdc' stroke-width='1'/></svg>");?>輸出如下:
PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPjxsaW5lIHgxPScwJyB5MT0nMTAwJScgeDI9JzEwMCUnIHkyPScxMDAlJyBzdHJva2U9JyNkY2RjZGMnIHN0cm9rZS13aWR0aD0nMScvPjwvc3ZnPg==
再引入到 css 的 background-image 中:(注意原 utf8 要改成 base64 )
input { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPjxsaW5lIHgxPScwJyB5MT0nMTAwJScgeDI9JzEwMCUnIHkyPScxMDAlJyBzdHJva2U9JyNkY2RjZGMnIHN0cm9rZS13aWR0aD0nMScvPjwvc3ZnPg==") ;}結(jié)語(yǔ)
其實(shí)還有很多方法可以來(lái)解決這個(gè)問(wèn)題,大家盡情發(fā)揮一下腦洞吧。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選