我们在移动端或者pc端开发中经常会遇到由字体大小的限制引起的布局问题。
我们先看一张效果，虽然很丑，但能说明问题就行。
下面我们从两方面来讨论造成这个问题。
我们看到设计图的内容分为左右两列，且各占50%，左边的内容分为标题和描述，标题设计为18号字体，描述的字体为14号字体。这样看起来比较和谐。
但是设计图上的描述内容在实际的设计中是没有换行的。此时若我们将字体调小将严重影响实际的效果，此外有的人会说我们可以调小所有的字体，但是如果在开发中这一块儿是新添加的，作为前端工程师就要修改大量的页面。
有时我们发现字体无法修改再小了，因为不是所有的浏览器都支持字体可以小于12px;在上面的效果图中不明显，我们可以想象一下在图中加加一个背景图标，图标的定位是右下方，我们要的效果是文字不能遮挡图标。这时我们怎么解决。
还有的情况是高分屏的移动设备的字体可以刚好容下这个字体，比如：device-pixel-ratio 为2或者以上的刚好，而device-pixel-rato为1的恰恰不行。
这些情况可以归结为两类：
-
ui设计的问题
-
手机适配的问题
最严重的是ui设计的不合格，设计图的整体布局是按照某一设备的尺寸的两倍来设计的。比如iphone6的尺寸为375X667，设计图就是750X1334的尺寸，布局是按照这尺寸来的，但是里面的字体却不是，字体是自己随意定的，这样的设计师只注重效果的好看，而不考虑字体在实际的设备上显示，例如在实际设备上显示14px，那么在效果图上就应该是28px，但设计师为了达到设计美观的目的，会调大或调小这个字体，导致我们前端开发人员字按照此效果图写页面时问题重重。
解决方案：
这种情况只有给设计人员反馈，对效果图进行局部修改。但是往往这种情况沟通很麻烦，反反复复的。
大部分设计师都会遵循开发的标准，将字体的设备显示效果和设计效果按一定的比例设计。但是我们在开发中会遇到设计的效果字体10px的问题，而大部分浏览器都不支持小于10px的字体。这时我们该怎么办。
解决方案：
使用transform中的scale(0.85)字体所在的元素进行缩放，然后用translate()移动元素的位置，因为scale是对元素的缩放中心为元素所在位置的几何中心。
因为现在的手机品牌太多，手机的尺寸，手机的device-pixel-ratio不同，要做到对所有手机的适配很难，对于一些特殊的设备的情况我们可以使用媒体查询来解决。
例如下面的代码：
@media only screen and (max-width:310px) and (min-width:300px) {
html,
body {
font-size: 9.375px
}
}
有些手机的但是有些手机因为device-pixel-ratio过低，而我们的设计稿是依据的时高分辨率的设备设计的，这些的可能会出现布局或字体显示的问题。这时我们就需要使用transform的scale来解决，使用方法同上。