小程序font-size影响布局的问题？

Question

下面的三个记录是从数据库读取出来的，按说样式是一模一样的，但是现在最上面的左边整体小了，我在做页面时好像和font-size:用的rpx的关系，有人遇到过这样的问题吗？怎么解决？

Answer 1

根本原因不是由于字体大小。猜测是因为你的任务内容描述的文本太短的缘故。

可以考虑把整个卡片的宽度设置为 width:100% 来固定卡片的宽度。

Answer 2

可能不是font-size的问题，审查元素看下，是不是有margin或者padding，这种布局一般都是设置父元素盒子宽度100%

Answer 3

首先可以肯定的一点是，与你的 font-size 并无关系。

从页面的效果来看，下面两个容器的内容在正文部分是两行的，也就是说，第一行的文本已经把容器撑开到最大了，而第一个容器并没有到一行的宽度。

简单来说，主要问题是容器的宽度没有设置，或许可能你用了 flex: 1; 然后也没有其他的宽度来支撑，所以，在内容不足的时候，整体就缩小了。

最简单的解决办法是给容器设置一个宽度值相关的属性，比如 width 或者 max-width，甚至是 flex: 1 100%;，具体要看你的实际代码情况来处理。

如果设置了 100% 后出现横向滚动条的话，那么就要容器的外层或者容器自身 margin 或者 padding 等盒模型相关属性是否有影响了。