字体大小随屏幕大小而变化
第四维度
我不知道是什么原因造成的，但似乎是网格容器，ul和li文本的某种组合比容器宽，会导致文本的字体大小随着智能手机或Chrome手机模拟中的屏幕大小而增长。当然，这会使文本与页面的其余部分不成比例，这几乎破坏了任何设计。
据我所言，这应该可以解决问题：
<html lang="sr">
<head>
<meta charset="utf-8"/>
<style>
body {
margin: 0;
font-style: normal;
font-family: Robo, Arial, Helvetica, sans-serif;
font-size: 16px;
display: grid;
grid-template-columns: 300px auto;
}
.nav {
margin: 0;
padding: 5px;
grid-column: 1;
background-color: yellow;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
</style>
</head>
<body>
<div class="nav">
<p><a href="#">THis is a test text to show when and how this effect happens.</a></p>
<p>THis is a test text to show when and how this effect happens.</p>
<p><a href="#">THis is a test text to show when and how this effect happens.</a></p>
<ul>
<li><h3>Test</h3>
<ul>
<li>ABC</li>
<li><a href="#" >THis is a test text to show when and how this effect happens.</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
在此页面上，如果您在计算机上打开它，则应显示以下内容：
但是，如果我在Chrome检查器中切换到设备模式并减小宽度，则会得到以下信息：
如果在智能手机上查看页面，也会发生同样的情况：
检查器显示，例如，由于某种原因，即使ABC项目的字体大小应为16px，但其高度为49px。
那么，我在这里想念的是什么完全显而易见的东西？！
用户名
这是因为您没有设置视口。尝试将其添加到您的头上。
<meta name="viewport" content="width=device-width">
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
雷鸟字体大小随Content-Type标头中的编码而变化
- 2
字体大小随着刷新而变化
- 3
根据屏幕尺寸缩放字体大小？
- 4
某些屏幕宽度的建议字体大小
- 5
更改屏幕上的字体大小
- 6
字体大小值随浏览器缩放而缩放
- 7
字体大小值随浏览器缩放而缩放
- 8
li列表随着过渡字体大小的变化而移动
- 9
如何从iOS设置中检测动态字体大小的变化？
- 10
Libgdx 字体大小
- 11
为什么em字体大小不会随字体类型改变？
- 12
CSS使字体大小适合移动设备/较小的屏幕
- 13
在屏幕分辨率上调整字体大小
- 14
更改屏幕保护程序的字体大小，分子xscreensaver
- 15
Python-Tkinter按钮大小在更改其字体大小时发生变化
- 16
找到相对字体大小的绝对字体大小
- 17
NSMutableAttributedString设置字体大小
- 18
改变gnuplot的字体大小
- 19
Matplotlib图例字体大小
- 20
更改文字的字体大小
- 21
增加NSTextView的字体大小
- 22
邪恶的PDF字体大小
- 23
如何测量字体大小？
- 24
默认HTML字体大小
- 25
更改valueBoxes的字体大小
- 26
CSS增加字体大小
- 27
字体大小的<span>背景
- 28
UIFont：字体大小不同
- 29
环境字体大小太小
我来说两句