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

資訊專欄INFORMATION COLUMN

一篇文章了解移動(dòng)端文本垂直居中

Vultr / 3774人閱讀

摘要：經(jīng)常我們?cè)跒g覽器上調(diào)試的好好的，但是到了移動(dòng)端就會(huì)有各種奇特的適配問(wèn)題最經(jīng)常遇見(jiàn)莫過(guò)于中文字稍微偏上了。為什么中文本偏上文本都會(huì)有一個(gè)內(nèi)容區(qū)域，這個(gè)區(qū)域就是我們選中文本時(shí)展示的區(qū)域。

在日常工作中，經(jīng)常會(huì)遇到圖片+文字+背景色的設(shè)計(jì)稿實(shí)現(xiàn)。經(jīng)常我們?cè)贑hrome瀏覽器上調(diào)試的好好的，但是到了移動(dòng)端就會(huì)有各種奇特的適配問(wèn)題——最經(jīng)常遇見(jiàn)莫過(guò)于Android中文字稍微偏上了。在iOS和Android上的調(diào)試，常常讓工程師們苦不堪言。本文對(duì)文字的垂直居中做了初步的研究，描述了為什么會(huì)出現(xiàn)偏移，并給出了彈性盒子布局的方案（適配大部分情況），希望能對(duì)大家的工作帶來(lái)一點(diǎn)幫助。
1. 為什么Android中文本偏上

文本都會(huì)有一個(gè)內(nèi)容區(qū)域，這個(gè)區(qū)域就是我們選中文本時(shí)展示的區(qū)域。Android在渲染文本的時(shí)候會(huì)參考字體，但是原生Android又沒(méi)有默認(rèn)的中文字體，這就導(dǎo)致了它使用英文字體來(lái)進(jìn)行內(nèi)容區(qū)域的設(shè)置，讓文本在內(nèi)容區(qū)域中就偏移了。而CSS是通過(guò)內(nèi)容區(qū)域來(lái)設(shè)置垂直居中的，所以這個(gè)問(wèn)題從根子上就錯(cuò)了。對(duì)于低版本的Android機(jī)器（7.0以下），單純CSS的方法是不夠的。

2. 實(shí)現(xiàn)文本垂直居中的方案

對(duì)于7.0以上的Andriod機(jī)器，我們使用以下特性，來(lái)實(shí)現(xiàn)一個(gè)文本垂直居中的方案。

1.1 使用彈性盒子布局 
display: flex;
align-items: center;

利用彈性盒子進(jìn)行垂直居中來(lái)保證PC和iOS的垂直居中。

注意：在此方案中，我們使用的是彈性盒子布局，塊級(jí)元素中的line-height不是指行間距，而是指塊級(jí)容器內(nèi)部line-box的最小高度。line-height和height設(shè)置為同樣的值指針對(duì)內(nèi)聯(lián)元素，不適用于本方案。另外，line-height的默認(rèn)值是normal，被不同的瀏覽器實(shí)現(xiàn)為1，1.2或者其他的值，強(qiáng)行把line-height設(shè)置為1也會(huì)導(dǎo)致錯(cuò)位。

1.2 給Android設(shè)置中文字體

在文本元素添加屬性lang="zh-cmn-Hans"，代表中文-國(guó)語(yǔ)-簡(jiǎn)體，手動(dòng)給Android設(shè)置中文。也可以在html元素中設(shè)置，但是會(huì)影響頁(yè)面中英文文本的展示。


或者
1.3 font-size設(shè)置為vw避免適配 
vw: 屏幕寬度的1%，業(yè)界最新的適配方法。在750寬度的屏幕中，1vw=7.5px。具體概念及使用方法可以參考《茴字的四種寫(xiě)法—移動(dòng)適配方案的進(jìn)化》

我自己的實(shí)踐經(jīng)驗(yàn)，我發(fā)現(xiàn)當(dāng)font-size值設(shè)置為0.5vw倍數(shù)時(shí)——例如0.5vw, 1.5vw, 2vw...，**在移動(dòng)端配合彈性盒子布局總能垂直居中（某些低端機(jī)型要設(shè)置為1vw的倍數(shù)）。

PS: 應(yīng)該涉及到某些具體的屏幕像素原理，期待能后期補(bǔ)充。

1.4 實(shí)際Demo

URL：http://h5.ssp.qq.com/static/t...
源碼：


 


  
  
  
  塊級(jí)元素實(shí)現(xiàn)文字垂直居中
  



  我們會(huì)測(cè)試移動(dòng)端圖片+文字的居中
  

    

      

      
立即下載
參考文獻(xiàn)：

《Android瀏覽器下line-height垂直居中為什么會(huì)偏離？》

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

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

相關(guān)文章

  • 一篇文章了解移動(dòng)端文本垂直居中

    摘要：經(jīng)常我們?cè)跒g覽器上調(diào)試的好好的，但是到了移動(dòng)端就會(huì)有各種奇特的適配問(wèn)題最經(jīng)常遇見(jiàn)莫過(guò)于中文字稍微偏上了。為什么中文本偏上文本都會(huì)有一個(gè)內(nèi)容區(qū)域，這個(gè)區(qū)域就是我們選中文本時(shí)展示的區(qū)域。 在日常工作中，經(jīng)常會(huì)遇到圖片+文字+背景色的設(shè)計(jì)稿實(shí)現(xiàn)。經(jīng)常我們?cè)贑hrome瀏覽器上調(diào)試的好好的，但是到了移動(dòng)端就會(huì)有各種奇特的適配問(wèn)題——最經(jīng)常遇見(jiàn)莫過(guò)于Android中文字稍微偏上了。在iOS和An...

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

  • vertical-align以及利用 vertical-align 實(shí)現(xiàn)垂直居中

    摘要：在中實(shí)現(xiàn)垂直居中很多時(shí)候會(huì)用到，不過(guò)我一直對(duì)的使用糊里糊涂，現(xiàn)在整理一下關(guān)于它的一些知識(shí)點(diǎn)。將盒子的垂直中心點(diǎn)與父級(jí)盒子基線往上一半高度的位置對(duì)齊。時(shí)位置與設(shè)置一致。我們可以將設(shè)為來(lái)讓元素完全垂直居中。 在 css 中實(shí)現(xiàn)垂直居中很多時(shí)候會(huì)用到 vertical-align ，不過(guò)我一直對(duì) vertical-align 的使用糊里糊涂，現(xiàn)在整理一下關(guān)于它的一些知識(shí)點(diǎn)。原文鏈接 1. 適...

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

  • vertical-align以及利用 vertical-align 實(shí)現(xiàn)垂直居中

    摘要：在中實(shí)現(xiàn)垂直居中很多時(shí)候會(huì)用到，不過(guò)我一直對(duì)的使用糊里糊涂，現(xiàn)在整理一下關(guān)于它的一些知識(shí)點(diǎn)。將盒子的垂直中心點(diǎn)與父級(jí)盒子基線往上一半高度的位置對(duì)齊。時(shí)位置與設(shè)置一致。我們可以將設(shè)為來(lái)讓元素完全垂直居中。 在 css 中實(shí)現(xiàn)垂直居中很多時(shí)候會(huì)用到 vertical-align ，不過(guò)我一直對(duì) vertical-align 的使用糊里糊涂，現(xiàn)在整理一下關(guān)于它的一些知識(shí)點(diǎn)。原文鏈接 1. 適...

    madthumb 評(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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<