专栏首页恩蓝脚本移动端android上line-height不居中的问题的解决

移动端android上line-height不居中的问题的解决

现在越来越多的移动界面使用rem适配,遇到的坑也不尽其数,今天就移动端android上line-height不居中的问题提出自己的解决办法。

据分析得知原因:

1.字体大小不要使用奇数字号,带小数点的更不要提了。也就是说被2整除的整数且不可小于12px。 2.使用rem的单位时造成(根元素如果动态改变时,根元素字体可能不是整数)。

那么,怎么解决了?

网上有好几种,如

1.把字号内外边距等设置为需求大小的2倍,使用transform进行缩放。只能针对 单个或者是一排的布局进行缩放,如果是父级自适应高度且可展示多行的,使用transform是有问题的。因为transform缩放是不影响页面布局的。 2.把字号内外边距等设置为需求大小的2倍,使用zoom进行缩放,可以完美解决。 3.把line-height设置为0,使用padding值把元素撑开,说是可以完美解决(经过测试,没有用的!)。

下面我列出自己的解决办法:

使用

display: table-cell;
text-align: center;
vertical-align: middle;

这种自适应垂直布局,不懂得自行百度,当然,这种布局和浮动一起使用会失效,怎么解决这个问题,我常用的就是在外面包一个标签,把浮动属性放在此元素上,简单的代码如下:

<!DOCTYPE html 
<html 
 <head 
  <meta charset="utf-8" / 
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" 
  <meta content="yes" name="apple-mobile-web-app-capable" 
  <meta content="black" name="apple-mobile-web-app-status-bar-style" 
  <meta content="telephone=no" name="format-detection" 
  <meta http-equiv="Expires" content="-1" 
  <meta http-equiv="Cache-Control" content="no-cache" 
  <meta http-equiv="Pragma" content="no-cache" 
  <meta name="wap-font-scale" content="no" 
  <meta http-equiv="X-UA-Compatible" content="IE=edge" 
  <meta name="renderer" content="webkit|ie-comp|ie-stand" 
  <meta name="keywords" content="" 
  <meta name="description" content="" 
  <!--此处为简单的适配,不影响-- 
  <script type="text/javascript" charset="utf-8" 
   ! function() {
    setRem();
    window.addEventListener('orientation' in window ? "deviceorientation" : "resize", setRem);
    function setRem() {
     var html = document.documentElement;
     var width = html.clientWidth;
     html.style.fontSize = width / 16 + 'px'
    }
   }();
  </script 
  <title 解决line-height问题</title 
  <style type="text/css" 
   .bindBtn {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 3rem;
    height: 1.5rem;
    font-size: .75rem;
    text-align: center;
    color: #fff;
    border-radius: 0.75rem;
    background-color: #f44975;
    text-decoration: none;
   }   
   .buyBtn {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 3rem;
    height: 1.5rem;
    border-radius: 0.75rem;
    font-size: 0.6rem;
    color: #fff;
    background: #666;
   }  
   .float_left {
    float: left;
   }
  </style 
 </head 
 <body 
  <a class="bindBtn" href="javascript:;" rel="external nofollow" rel="external nofollow"  已邀请</a 
  <!--浮动的情况 -- 
  <a class="float_left" style="text-decoration: none;margin-top: 0.5rem;" href="javascript:;" rel="external nofollow" rel="external nofollow"  
   <span class="buyBtn" 购买</span 
  </a 
 </body 
</html 

在安卓机上效果如下:这里写图片描述

以上就是本文的全部内容,希望对大家的学习有所帮助。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • laravel框架学习记录之表单操作详解

    本文实例讲述了laravel框架学习记录之表单操作。分享给大家供大家参考,具体如下:

    砸漏
  • 简单了解Linux性能监控命令free

    在系统遇到各种IO瓶颈,内存使用率高,cpu使用率高等问题时,我们如何来定位错误?linux提供了很多命令来协助我们快速定位到错误,free命令是Linux最常...

    砸漏
  • tp5修改(实现即点即改)

    以上这篇tp5修改(实现即点即改)就是小编分享给大家的全部内容了,希望能给大家一个参考。

    砸漏
  • python 面向对象基础 访问限制

    在Class内部,可以有属性和方法,而外部代码可以通过直接调用实例变量的方法来操作数据,这样,就隐藏了内部的复杂逻辑。

    葫芦
  • HTML head 头标签 总结

    HTML head 头部分的标签、元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多...

    前朝楚水
  • 常用meta标签整理

    常用meta标签列表,为了加强记忆,ytkah采用先放代码再放注释的形式,献给有需要的朋友们

    ytkah
  • SQL | SQL 必知必会笔记 (二)

    主要内容:介绍如何用 AND 和 OR 操作符组合成 WHERE 子句;介绍如何明确地管理求值顺序,如何使用 IN 和 NOT 操作符。

    PyStaData
  • html头部meta属性大全

    IT故事会
  • 通过shell检查分区表中是否含有默认分区(r2笔记87天)

    在大数据量的系统中,分区表是很常见的,分区有多种类型,可以根据业务来选择自己需要的分区,不过为了数据的兼容性,需要考虑对于分区表设定一个默认的表分区,如果数据在...

    jeanron100
  • python中 __cmp__

    对 int、str 等内置数据类型排序时,Python的 sorted() 按照默认的比较函数 cmp 排序,但是,如果对一组 Student 类的实例排序时,...

    周小董

扫码关注云+社区

领取腾讯云代金券