Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

[CSS小技巧] 把font-size当变量用

  在CSS中经常会用到一些等值或按比例设置的值。比如需要一个正方形的话就得将元素的长和宽分别设置为相同的值,或者需要一个圆的话也是同理。前者只有一个“边长”参数,后者只有一个“半径”参数。它们都是单参数的,分别去设置长和宽会让代码修改起来变麻烦。
  如果可以使用CSS变量的话,我们可以这么写,比如要画一个圆:
<!DOCTYPE html>
<!--可以在较新的Firefox上测试,Chrome暂不支持-->
<style>
div {
  --radius:100px;
  height:var(--radius);width:var(--radius);
  border-radius:100%;
  background:#EEE;
}
</style>
<div></div>
  但是这个代码的兼容性是捉鸡的,目前只有Firefox支持。这时候我们可以考虑将这个--radius:100px;以其它可读取的形式保存下来。没错,也许很多人已经想到了,那就是使用em单位。比如上面的代码这么写就可以兼容到跟多浏览器:
<!DOCTYPE html>
<style>
div {
  font-size:100px;
  height:1em;width:1em;
  border-radius:100%;
  background:#EEE;
}
</style>
<div></div>
  这些只是等值的情况,其实这个做法还有更多应用场景,比如如果要让元素在布局空间中不占尺寸,我们会使用margin负值设置到元素尺寸上来把元素所占的空间消化掉,而元素尺寸本身是无法引用的,这时如果有个这样类似变量的东西就非常容易处理。还有元素的clip操作中经常也会用到元素的尺寸,如果使用了这种做法,想要对元素做左切或上切操作就可以这么写:
<!DOCTYPE html>
<style>
.panel {
  position:absolute;
  font-size:100px;
  height:1em;width:1em;
  border-radius:100%;
  background:#EEE;
  clip:rect(10px 1em 1em 10px);
}
</style>
<div class="panel"></div>

  当然,这个做法也是有副作用的,而且这个副作用一目了然。因为我们确实设置了font-size,如果里面有文字的话也会取这个值。除非嵌套个元素,使用优先级更高的font-size来覆盖这个。所以在某些场景下,这个方法就不适用。
  以上这些只是个人经验之谈,不喜欢这种方法的请自觉绕道。
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^