成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

小于12px的文本居中問(wèn)題

HelKyle / 2038人閱讀

摘要：前幾天在做項(xiàng)目的過(guò)程中，關(guān)于字體小于時(shí)，很難做到完全居中顯示，表示有點(diǎn)抓狂，各種百度找到一個(gè)貌似還不錯(cuò)的方法，總結(jié)出來(lái)分享給你和我。

前幾天在做項(xiàng)目的過(guò)程中，關(guān)于字體小于12px時(shí)，很難做到完全居中顯示，表示有點(diǎn)抓狂，各種百度找到一個(gè)貌似還不錯(cuò)的方法，總結(jié)出來(lái)分享給你和我。

在PC端的Chrome瀏覽器中，小于12像素的字體仍然以12像素顯示，即使是設(shè)置了-webkit-text-size-adjust: none;也好像沒(méi)什么作用。經(jīng)過(guò)實(shí)驗(yàn)，發(fā)現(xiàn)如下兩種方式比較有用，各位看官可聽(tīng)我細(xì)細(xì)道來(lái)。

方式一

使用transform:scale()
假如設(shè)計(jì)同學(xué)給你的字體大小是10px,你設(shè)置了font-size:10px，此時(shí)在PC中測(cè)試并不會(huì)看到效果；一種有用的方法是：

font-size: 12px //PC中Chrome的最小字體
transform: scale(0.833333333);
height: 12px; //設(shè)計(jì)給的高度是10px
line-height: 12px;

這種方式是可以將字體縮小到將近10px，但是包裹字體的標(biāo)簽(div,p)的寬度、高度甚至是margin等值都縮小了0.8333333，假如設(shè)計(jì)同學(xué)給你的div的高度是20px，現(xiàn)在為了能正確顯示20px的高度，你必須要將高度設(shè)置為(20/0.8333333)px，寬度和margin的值的設(shè)置也是這樣；要想讓其居中，也必須將line-height設(shè)置為(20/0.8333333)px；這種計(jì)算方式比較復(fù)雜，且這種方式可能會(huì)影響到文檔流中其他元素的位置，于是就有了如下的方式二的產(chǎn)生。

方式二

方式二中有兩個(gè)比較重要的點(diǎn)：
（1）對(duì)于小于12px的字體，可先將其擴(kuò)大二倍，然后使用transform縮小0.5倍
（2）在標(biāo)簽的位置方面，可以給它一個(gè)相對(duì)定位的父元素，此父元素的高度和寬度可按照設(shè)計(jì)圖設(shè)置，然后將它的定位設(shè)置為相對(duì)定位，并且使其位于父元素的中心（垂直水平都居中）
HTML結(jié)構(gòu)如下：


    

        我要垂直水平居中

css樣式：

.parent{
    position: relative;
    width: 120/@rem;
    height: 24/@rem;
    overflow: hidden;   
}
child{
    position: absolute;
    top: -50%;
    left: -50%;
    width: 240/@rem;
    height: 48/@rem;
    line-height: 48/@rem;
    font-size: 36/@rem;
    color: #ffffff;
    transform: scale(0.5);
    background: #fa5d5f;
    border-top-left-radius: 16/@rem;
    border-bottom-right-radius: 16/@rem;
    box-sizing: border-box;
}

parent和child的關(guān)系如下圖所示，其中parent相當(dāng)于用來(lái)占位，這樣縮放就不會(huì)影響到parent外面的父元素，因?yàn)檫M(jìn)行縮放的是絕對(duì)定位的child，它不在文檔流內(nèi)，并不會(huì)影響到其他元素在文檔流中的位置。

另外，附送兩個(gè)小tips
（1）小于12px的字體（或者說(shuō)微信webview）不適用line-height,但是在大于等于12px的字體（或者非微信webview）適用line-height,那么從這方面就可以嘗試通過(guò)csshack的方式來(lái)實(shí)現(xiàn)了，所以如果想用line-height做居中處理，最好不要使用小于12px的字體，可以使用方式一進(jìn)行縮放；
（2）字體最好使用偶數(shù)像素，基數(shù)像素在顯示時(shí)，通常會(huì)遇到1個(gè)像素偏差，無(wú)法完全居中，這個(gè)可以和設(shè)計(jì)同學(xué)商量。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/116798.html

相關(guān)文章

  • 單選框和復(fù)選框與文本的垂直居中顯示問(wèn)題

    摘要：故嘗試揣摩業(yè)界大牛的一些歷程，希望能得到不一樣的收獲。張?chǎng)涡袂拜叺牟┛褪呛懿诲e(cuò)的選擇之一，對(duì)這些基本技能闡述得十分透徹。本文是對(duì)其很早一篇文章復(fù)選框或單選框與文字對(duì)齊的問(wèn)題的深入研究的再次實(shí)驗(yàn)，畢竟瀏覽器對(duì)的支持多年來(lái)變化很大。 前言 工作三年，寫(xiě)了不少代碼，也確實(shí)接觸不少技術(shù)。但是仔細(xì)回顧，卻又感一片空白，一臉茫然。故嘗試揣摩業(yè)界大牛的一些歷程，希望能得到不一樣的收獲。 張?chǎng)涡袂拜叺?..

    WrBug 評(píng)論0 收藏0

  • 單選框和復(fù)選框與文本的垂直居中顯示問(wèn)題

    摘要：故嘗試揣摩業(yè)界大牛的一些歷程，希望能得到不一樣的收獲。張?chǎng)涡袂拜叺牟┛褪呛懿诲e(cuò)的選擇之一，對(duì)這些基本技能闡述得十分透徹。本文是對(duì)其很早一篇文章復(fù)選框或單選框與文字對(duì)齊的問(wèn)題的深入研究的再次實(shí)驗(yàn)，畢竟瀏覽器對(duì)的支持多年來(lái)變化很大。 前言 工作三年，寫(xiě)了不少代碼，也確實(shí)接觸不少技術(shù)。但是仔細(xì)回顧，卻又感一片空白，一臉茫然。故嘗試揣摩業(yè)界大牛的一些歷程，希望能得到不一樣的收獲。 張?chǎng)涡袂拜叺?..

    yck 評(píng)論0 收藏0

  • 前端常見(jiàn)問(wèn)題——安卓文本無(wú)法垂直居中

    摘要：安卓文本無(wú)法垂直居中的問(wèn)題問(wèn)題安卓的字體大小在小于像素的時(shí)候無(wú)法使用行高來(lái)垂直居中目前在微信等應(yīng)用都存在該問(wèn)題，而在最新的移動(dòng)端瀏覽器上無(wú)該問(wèn)題截止本文編寫(xiě)時(shí)間，微信客戶端的版本為，版本為。 安卓文本無(wú)法垂直居中的問(wèn)題 問(wèn)題 安卓 webview 的字體大小在小于 12 像素的時(shí)候無(wú)法使用行高來(lái)垂直居中 ps：目前在微信等應(yīng)用都存在該問(wèn)題，而在最新的移動(dòng)端 Chrome 瀏覽器上無(wú)該問(wèn)...

    aristark 評(píng)論0 收藏0

  • 移動(dòng)端兼容問(wèn)題總結(jié)(1)

    摘要：原文地址鍵盤(pán)類型問(wèn)題描述在上只需要更換即可更改鍵盤(pán)類型，無(wú)效。補(bǔ)充解決方式輸入法頂起頁(yè)面問(wèn)題描述頁(yè)面被輸入法頂起，導(dǎo)致滾動(dòng)，無(wú)法鎖定解決方式在當(dāng)前容器外層再包裹一層，使用來(lái)解決這個(gè)問(wèn)題，做一個(gè)容器內(nèi)滾動(dòng)。 原文地址: https://luoyangfu.com/article... input 鍵盤(pán)類型問(wèn)題 描述: 在android上只需要更換type 即可更改鍵盤(pán)類型，ios無(wú)效。...

    arashicage 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<