h5 移动端 字体行高偏上问题

才发现 移动端项目怎么会有那么多问题呢?

现在不用搞ie的hack兼容问题了

又来了h5的兼容

哎,问题还是得解决啊

言归正传

问题:移动端h5页面,文本行高偏上的问题,(据说ios手机没有),咱也没ios手机,咱也不敢问啊,有的大佬试试

当我们使用rem,em,作适配时,字体可能出现奇数,带小数点的,字体大小,当字体大小小于12px时,安卓手机为避免奇数字体带来的偏差会自动设置成偶数

网上有很多说法,

比如,

用flex布局设计 设置 align-items: center 的

设置行高为

line-height: normal;
vertical-align: middle;
使用padding撑开的

反正我是没生效,不知道大佬们生效了没有

经过测试,可行的方法,我的是小米手机(我发誓我是爱国的,下一部就买华为)

方法一:

改变字体大小,使其大于等于12px

将模块整体放大一倍,再使用 transform: scale(0.5); transform-origin: 0% 0%; 缩小为正常

方法二:

使用自适应表格布局 - - table布局

注意将外层容器设置脱离文档流 ,使用绝对定位,flex,浮动啊,都可以,看你喜欢

display: table-cell;

vertical-align: middle;

text-align: center;

收获测试崇拜值一枚

原文地址:https://www.cnblogs.com/CaktyRiven/p/10978411.html

时间: 2024-11-05 23:32:12

h5 移动端 字体行高偏上问题的相关文章

div css文字字体行高行距 深入理解css行间距设置

div css文字字体行高行距 深入理解css行间距设置 div css文字字体行高行距 DIVCSS5带您深入理解css行间距设置,字体行距如何最简单地设置. 在文章中,要实现调节设置每行文字字体间距(行距)是使用line-height属性.(体感音乐) 要使得每行的文字一定的间距距离所以可以通过line-height样式实现.接下来DIVCSS5通过DIV CSS实例实现字体文字上下间距. 相关扩展CSS教程: css line-height div css字间距 为了观察到行距设置效果,新

几种基本样式,背景图,字体,下划线,行高垂直等

<div style=:width:600px; heiget:600px; background-color:...; background-image; background-repea:...; background-position; 宽度               高度                背景颜色                     背景图片                   背景图平铺                 背景图位置 background-attach

MFC 编辑框中字体大小改变,行高不能改变,只能显示一半的问题,已解决。

CKagulaCEdit是CEdit的一个继承类,m_edit的CKagulaCEdit类型的一个变量 调用的时候,是这样的: 编辑框中字体大小改变,行高不能改变,只能显示一半的问题,问题如下: 这时的显示是这样的: 添加 CEdit::SetFont(m_pfont);这行后, 显示正常:

1. DataGridView设置字体、行高、列宽、单列居中

DataGridView表格内容的列宽.行高.字体的设置,设置某一列居中.一般地,会将行高设为统一的,列宽根据不同情况设定. [csharp] view plaincopyprint? // 调整字体 dataGridView1.Font = new Font("宋体", 11); // 调整行高 //dataGridView1.Rows[0].Height = 100; dataGridView1.RowTemplate.Height = 30; dataGridView1.Upda

post文件上传 tableview行高计算的优化 版本控制

Post上传 都是封装在请求体中的 1. 文件上传????????????? 设置头像/产品评论  iOS中更没有封装  需要你自己去安iOS实现  最复杂的 2.上传文件使用POST还是PUT请求???? POST请求体没有长度限制  需要你把上传的内容封装在请求体中 3.AFN中的POST请求 创建网络工具管理类 AFHTTPManager  *manager 悬着请求方法 manager post 把字典传递进去 AFN 的一个缺点  就是在请求到数句了解析数据出错的时候了 不应该在失败

css总结6:行高和字体大小的关系

1 CSS line-height 属性 代码: p.small {line-height:70%}p.big {line-height:200%} 运行后:70%与200%宽高 2 CSS font-size 属性 h1 {font-size:250%;}h2 {font-size:200%;}p {font-size:100%;} 两者特点: 1 一行文字行高和父元素高度一致的时候,垂直居中显示 2 行高:文字高度+上下边距 原文地址:https://www.cnblogs.com/auto

[ css 补充 line-height ] css中补充的line-height(行高)知识点

行高指的是文本行的基线间的距离,但是文本之间的空白距离不仅仅是行高决定的, 同时也受字号的影响 7.3 line-height 行高指的是文本行的基线间的距离,但是文本之间的空白距离不仅仅是行高决定的, 同时也受字号的影响. 7.3.1 语 法 line-height属性的具体定义列表如下: 语法: line-height : normal | <实数> | <长度> | <百分比> | inherit说明: 设置元素中行的高度.值: normal:默认行高,一般为1到

line-height 和 vertical-align 行高与行对齐精解 (图文)转文

行高指的是文本行的基线间的距离,但是文本之间的空白距离不仅仅是行高决定的, 同时也受字号的影响. 7.3 line-height 行高指的是文本行的基线间的距离,但是文本之间的空白距离不仅仅是行高决定的, 同时也受字号的影响. 7.3.1 语 法 line-height属性的具体定义列表如下: 语法: line-height : normal | <实数> | <长度> | <百分比> | inherit说明: 设置元素中行的高度.值: normal:默认行高,一般为1

在iOS中如何正确的实现行间距与行高

https://juejin.im/post/5abc54edf265da23826e0dc9 最近准备给 VirtualView-iOS 的文本元素新增一个 lineHeight 属性,以便和 VirtualView-Android配合时能更精确的保证双平台的一致性.面向 Google 以及 Stack Overflow 编程了一会后发现,能查到的资料大部分是介绍如何实现 lineSpacing 属性,而不是 lineHeight.但是我就是因为 iOS 和 Android 的默认 lineS