实战篇前端开发,突破文本最小限制?我们来看看这样一个页面。当我在PC端时,我的p标签中的字体大小是12px。那么我们在移动端做响应式变化的时候,文字肯定要相对小一些,所以我就把它设置为10px。这个时候,这个样式已经生效了,但是看这个字体,并没有发生任何变化!为什么?这是因为我们的浏览器有最小字体限制。我不知道是否所有浏览器都有,但我尝试了Edge和Chrome,并且存在此设置。然后有人说,这是用户的事情,我们前端开发有什么问题?其实开发不只是开发,更要注重用户体验。在这种情况下,您不能让每个用户都设置最小字体,更不用说只为您的一个网站设置了。解决方案仔细想一想,既然不能调整大小,那怎么才能让它看起来小一点呢?咦,我们的CSS里面不是有收缩属性吗!那我们试试,添加收缩的属性:/*shrinkto0.8ofitself*/transform:scale(0.8);效果也体现出来了,是不是真的缩水了?可是啊!我们有一个问题,我们以前是靠近左边的,但是我们的收缩是针对中心的,那怎么办呢?.我们可以直接把他设置到左边:/*Keepittotheleft*/transform-origin:lefttop;这样就可以实现效果:.linkBox-content-rightp{/*Shrinktoitself0.5*/transform:scale(0.8);/*靠左*/transform-origin:lefttop;}效果展示到最后其实感觉解决方案不止一种,有很多种。日常开发灵活,保持灵活,积累经验。本期内容到此结束,下次再见。
