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

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

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

最小限度？

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

那此时，这个款式曾经是失效了，然而看看这个字体，他并没有任何变动！

为什么呢？

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

我也不晓得是不是所有浏览器都有，然而我尝试了 Edge 和Chrome都存在这个设置。

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

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

解决方案

那认真想想，咱们既然不能调节大小，那咱们还能够怎么样让他看起来变小呢？

哎，咱们 CSS 外面不是有一个放大属性嘛！

那咱们试试，加上放大的属性：

/* 放大至本身 0.8 */
transform: scale(0.8);

成果也是体现了进去，是不是的确放大了？

然而啊！咱们呈现一个问题，咱们原来是靠左紧贴着的，而咱们的这个放大，他是针对核心放大的，那怎么办呢？。

咱们能够间接设置一下让他靠左：

 /* 放弃靠左 */
transform-origin: left top;

这样下来就能够实现成果了：

    .linkBox-content-right p {
        /* 放大至本身 0.5 */
        transform: scale(0.8);
        /* 放弃靠左 */
        transform-origin: left top;
    }

成果展现

尾述

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

日常开发是灵便的，放弃变通，积攒教训。

这期完了，下期再见。