绝对值px与相对值em

2019-10-11

以一个按钮为例,初始样式如下:image.png

div {
        padding: 6px 16px;
        border: 1px solid #446d88;
        border-radius: 4px;  

        // CSS3 
        // linear-gradient(): 函数用于创建一个线性渐变的 "图像"
        background: #58a linear-gradient(#77a0bb, #58a);
        // CSS3
        // box-shadow: 设置一个或多个下拉阴影的框(阴影水平偏移值(可取正负值); 阴影垂直偏移值(可取正负值);阴影模糊值;阴影颜色)
        box-shadow: 0 1px 5px gray;
        color: white;
        // CSS3
        //text-shadow: 设置文字阴影(阴影水平偏移值(可取正负值); 阴影垂直偏移值(可取正负值);模糊的距离;阴影颜色)
        text-shadow: 0 -1px 1px #335166;
        font-size: 20px;
        line-height: 30px;
        display: inline-block;
    }

此时,增大字号,效果:image.png(30px)image.png(40px),按钮宽高未变,整体比例发生变化

为了美化效果,还需要调整padding,行高等css规则,可维护性差,改动量大

当某些值,相互依赖时,应该把他们的相互关系用代码表示出来。

如果只修改字体大小,就实现整个按钮等比例缩放,则需要采用em或rem(相对html根级字号)

div {
        padding: .3em .8em; // 字号的0.3倍,em 相对于字号大小
        border: 1px solid #446d88;
        border-radius: .2em;  
        background: #58a linear-gradient(#77a0bb, #58a);
        box-shadow: 0 .05em .25em gray;
        color: white;
        text-shadow: 0 -.05em .05em #335166;
        font-size: 125%; // 父级字号的1.25倍 -- 浏览器默认字体大小为16px
        line-height: 1.5; // 行高是字号的1.5倍
        display: inline-block;
    }

此时增大字号,效果:image.png

此时就需要重新审视到底哪些效果应该跟着按钮一起放大,而哪些效果保持不变。

原文链接:segmentfault.com

上一篇:如何写一个漂亮的toolbar
下一篇:区块狗系统app开发
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部