h5移动端字体大小怎么随着页面大小变化而变化

Posted 2023-04-06

手机响应式布局，是获取屏幕尺寸，在某个区间用一种css，另个区间用另一种css。需要用@media写多份css的。无法做到真正的随屏幕变化而变化。

而<meta name="viewport" content="width=device-width" />的用法是随着屏幕的大小，自动把页面自适应到屏幕的大小。这个是管用的。

em是字体的宽度，也就是一个字体宽12px，那么em=12px；字体为15px，em=15px；一般用来动态控制字体外的区块大小去适应字体，而不是用来设置字体的大小的。例如：

<p style="width: 12em;">
<!-- / 无论这里设置的字体多大，宽度只会容纳12个字 / -->
</p>

如果<meta name="viewport" content="width=device-width" />没效果，建议你用图片贴出来，看看你想要的具体效果是什么。 参考技术A

手机响应式布局，是获取屏幕尺寸，在某个区间用一种css，另个区间用另一种css。需要用@media写多份css的。无法做到真正的随屏幕变化而变化。

那么如何解决横竖屏时页面内容字体大小呢？

这里就要用到 css 的一个属性值了：text-size-adjust : none

body     -webkit-text-size-adjust : 100% ;     -moz-text-size-adjust : 100% ;     -ms-text-size-adjust : 100% ;  text-size-adjust : 100%; 

设置属性：text-size-adjust : 100%; 这个属性值可以设置移动设备上的横竖屏，字体变化的问题，但必须设置100%。不能设置为none，不然，webkit浏览器无法人为放大文字大小，严重影响可用性。

设置这个属性哪里需要的地方就在哪里设置，如果全文都需要，那就在body里面设置属性值。

动画文本字段内的字体大小变化

【中文标题】动画文本字段内的字体大小变化

【英文标题】：Animate font size change inside textfield

【发布时间】：2019-08-04 15:24:39

【问题描述】：

我想为字体大小设置动画，因为文本字段内的字符数发生了变化。 用例： 我有一个文本字段，最初我有一个大文本，随着字符数量的增加，我想减小字体大小并为更改设置动画。 示例：在 android 计算器应用程序中，表达式字体大小会随着表达式大小的增长而缩小和动画。 我想要有这样的效果。 我是新来的，我怎么能达到这样的效果？ 我已经尝试过使用动画容器。

【参考方案1】：

使用 Textfield 的“onChanged”属性。然后检查文本字段中文本的大小。然后做你想做的。

【讨论】：

我可以改变文字大小...但是我想要动画改变大小