实战篇之前端开发时，突破文字最小限制

实战篇之前端开发时，突破文字最小限制

大家好，我是小简，今天遇到一个需求，如下。

最小限制？

我们来看这样一个页面，此时我在PC端时，我p标签中字体大小是12px，那我们在做移动端响应式变化时，文字肯定也要相对缩小一些，所以呢，我就将他设置为10px。

那此时，这个样式已经是生效了，但是看看这个字体，他并没有任何变化！

为什么呢？

这是因为我们浏览器，他有一个最小字体限制。

我也不知道是不是所有浏览器都有，但是我尝试了Edge和Chrome都存在这个设置。

那有人就说了，这是用户的事情，关我们前端开发什么事？

那其实，开发不单纯是开发，你更要注重用户的体验感，那这种情况，那肯定不能让每一个用户去设置这个最小字体，何况单纯是为了你的一个网站去设置。

解决方案

那仔细想想，我们既然不能调节大小，那我们还可以怎么样让他看起来变小呢？

哎，我们CSS里面不是有一个缩小属性嘛！

那我们试试，加上缩小的属性：

/* 缩小至自身0.8 */
transform: scale(0.8);
1
2

效果也是体现了出来，是不是确实缩小了？

但是啊！我们出现一个问题，我们原来是靠左紧贴着的，而我们的这个缩小，他是针对中心缩小的，那怎么办呢？。

我们可以直接设置一下让他靠左：

 /* 保持靠左 */
transform-origin: left top;
1
2

这样下来就可以实现效果了：

    .linkBox-content-right p {
        /* 缩小至自身0.5 */
        transform: scale(0.8);
        /* 保持靠左 */
        transform-origin: left top;
    }
1
2
3
4
5
6

效果展示

尾述

那其实解决方法我感觉是不止这一种，很多种。

日常开发是灵活的，保持变通，积攒经验。

这期完了，下期再见。