移动端页面数字占用空间不同的问题

最新推荐文章于 2024-05-24 09:40:34 发布
最新推荐文章于 2024-05-24 09:40:34 发布
阅读量500 收藏 1
点赞数
分类专栏： 踩坑 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55014951/article/details/126839214
版权

这里主要是字体原因

 

主要体现在0和1的差别很大,导致排列不整齐

解决办法,使用等距字体

这里我使用的是Consolas, Monaco, monospace

因为太久没使用过font-family,在这里卡了很久

font-family: Consolas, Monaco, monospace;

注意这里字体名称不需要用""括起来

font-family: "Consolas, Monaco, monospace";

这种方式是错误的!!!

需要引号的是字体名由两个单词组合起来的,例如:"Gill Sans"

font-family: "Gill Sans", sans-serif;

清风拌酒
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决真机测试小程序0和1对不齐(或宽度不一致)的问题
m0_38005980的博客
07-13 896
真机测试，1 的宽度就是比 0 要窄，怎么解决呢？ 解决---> 假设时间列表的容器为 a ，a里面的内容左对齐，然后 a 在它的父元素的里面居中 其中红色框代表 a , 蓝色框 代表它的父元素 结果---> 就会发现 1 变成了 另一个1 （原谅我打不出来）。就对齐了。。。至于原因我也不知道是为啥，如有哪位小可爱解答一下，感激不尽 ...
解决火狐与IE空格宽度不一致的方法：style="font-family: '宋体', Simsun;"
kacoro的专栏
08-16 1020
仅需此句 style="font-family: '宋体', Simsun;"
android时间textView不等距导致宽度跳来跳去自定义View解决
最新发布
jzlhll123的专栏
05-24 105
android时间textView显示不等距导致宽度跳来跳去的原因是，大部分字体，0~9的数字的宽度是不等距的，因此当显示时间的时候，由于组合不同，就会导致宽度不同，时间看上去就会跳来跳去。因此解决办法有2个。第一，使用monospace的字体库。第二，就是今天我要说的自定义view来解决了。
数字1渲染和其他数字大小不一致
韩旭不会敲代码吧的博客
04-06 454
数字1渲染和其他数字大小不一致
自定义FlowLayout流式布局
风和先行的专栏
02-25 300
基于FlowLayout流式布局扩展的接口，可设置每行最大的列数，以及文本是居左、居中还是居右布局。 修改后的代码如下： package com.lanmeng.test.view; import android.annotation.SuppressLint; import android.content.Context; import android.view.View; import android.view.ViewGroup; import android.graphics.Rec..
【BUG】数字在IOS中间隔特别大，PC端正常的BUG修复和问题解析
m0_48176238的博客
12-21 291
这个bug问题在于iconfont中的样式会对字体等等产生影响且仅在ios端有影响，最终解决方案是分开写！
vue单页面实现pc移动端页面不同
05-19
vue单页面实现pc移动端页面不同 博文：https://blog.csdn.net/qq_40488121/article/details/106218473
jQuery移动端输入数字跳格代码
06-24
jQuery移动端输入数字跳格代码是一款手机验证码输入自动跳格代码，光标可按位自动一下格，可留空位数，支持键盘左右方向键。
js阻止移动端页面滚动的两种方法
10-20
本文主要介绍了js阻止移动端页面滚动的两种方法。具有很好的参考价值，下面跟着小编一起来看下吧
手机移动端图片相册展示页面模板
07-12
注：无后台 移动端图片相册展示页面模板
关于移动端页面强制竖屏的方法
09-22
有经验的你肯定知道，当用户竖屏打开时，提示说你要把手机转过来是在是件很傻×的事情。这时如果用户没开启手机里的横屏模式，还要逼...这篇文章主要介绍了关于移动端页面强制竖屏的方法，感兴趣的小伙伴们可以参考一下
css中字体大小适配
MrNoboday
09-26 4719
# 字体大小的两种单位 font-size: 16px; // 固定大小，就是16像素 font-size: 1vw; // 相对大小，下面介绍转化方法 结果 先说怎么做适配：只需要将每个关于长宽的参数单位由px（像素）换位vw即可。那么关键怎么装换？ px 像素，我们通常使用的单位，如果html中的文字使用px作为大小单位的话，就会存在适配问题，即字体大小不能根据屏幕宽度适配。 vw 相对...
css文字和数字或者英文对不齐解决方案
SiShen654的博客
10-26 8010
由于文字基准线的不同，导致了数字偏上，英文偏下，当与中文一起排序时会有没有居中感，解决方案如下： height: 50px; line-height: 51px; /* 将行高比高度多出1px即可 */
js浏览器兼容
jazywoo_在路上
10-20 844
1. document.form.item 问题 问题： 代码中存在 document.formName.item("itemName") 这样的语句，不能在FF下运行 解决方法： 改用 document.formName.elements["elementName"] 2. 集合类对象问题 问题： 代码中许多集合类对象取用时使用()，IE能接受，FF不能
【CSS】一文搞懂flex:0,1,auto,none
IMSI的博客
11-22 2468
flex:0,1,auto,none
css linux 等宽字体,CSS3 等宽字体与ch单位的详解
weixin_30286727的博客
05-13 425
下面我们来看一篇关于CSS3 等宽字体与ch单位的使用方法介绍，希望这篇文章能够让各位理解到css中ch单位及字体等宽问题哦。一、什么是等宽字体？所谓等宽字体，一般是针对英文字体而言的。东亚字体，据我所知，应该都是等宽的，就是每个字符在同等size下占据的宽度是一样的。但是英文字体就不一定了，就难本文来说，我下面写一个单词，什么呢，就iMac吧，大家打开自己的像素眼，就会很明显地发现这个字符’i’...
最全前端面试问题及答案总结
热门推荐
永不放弃的博客
09-14 1万+
HTML&CSS： 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应。 JavaScript： 数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。 其他： HTTP、安全、正则、优化、重构、
input标签根据输入字符动态自适应宽度的实现（解决字母数字显示占位大小不同问题）
lianzhang861的博客
11-20 1万+
项目中想做个input随着打字，input的宽随着字数变化而长度变化 看了有人说用onkeydown,onkeyup配合使用 <input type="text" onkeydown="this.onkeyup();" onkeyup="this.size=(this.value.length>4?this.value.length:4);" size="4"> 还有...
怎么测试移动端页面有哪些兼容问题
02-24
移动端页面的兼容问题主要有：浏览器的兼容性、移动设备分辨率的兼容性、操作系统的兼容性、网络环境的兼容性以及其他特殊功能的兼容性。可以通过进行跨浏览器测试、跨移动设备测试、跨操作系统测试、跨网络环境测试等来测试移动端页面的兼容问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值