亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

Vultr / 3771人閱讀

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

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

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

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

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

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

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

注意：在此方案中，我們使用的是彈性盒子布局，塊級元素中的line-height不是指行間距，而是指塊級容器內(nèi)部line-box的最小高度。line-height和height設(shè)置為同樣的值指針對內(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"，代表中文-國語-簡體，手動(dòng)給Android設(shè)置中文。也可以在html元素中設(shè)置，但是會(huì)影響頁面中英文文本的展示。


或者
1.3 font-size設(shè)置為vw避免適配 
vw: 屏幕寬度的1%，業(yè)界最新的適配方法。在750寬度的屏幕中，1vw=7.5px。具體概念及使用方法可以參考《茴字的四種寫法—移動(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...
源碼：


 


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



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

    

      

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

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

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

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

相關(guān)文章

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

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

    sutaking 評論0 收藏0

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

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

    lscho 評論0 收藏0

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

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

    madthumb 評論0 收藏0

  • 前端常見問題——安卓文本無法垂直居中

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

    aristark 評論0 收藏0

發(fā)表評論

0條評論

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