绝对值px与相对值em

2019-10-11 admin

以一个按钮为例,初始样式如下: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

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

[转载]原文链接:https://segmentfault.com/a/1190000020648971

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-77119.html

文章标题:绝对值px与相对值em

相关文章
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
1.bootstrap-table 单击单行选中 $('#gzrwTable').on('click-row.bs.table', function(e, row, $element) { $(&#x...
2017-02-17
javascript:;与javascript:void(0)区别
javascript:;直接返回undefined javascript:void(0);要去执行一次表达式“0”,然后返回undefined ...
2017-05-12
Bootstrap显示与隐藏简单实现代码
本文实例为大家分享了bootstrap显示隐藏的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <meta http...
2017-03-14
自己参考两个仓库撸的通用的vue2.0+elementUI+多页面模板
A modern Vue.js multiple pages cli which uses Vue 2, Webpack3, and Element-UI Features Vue2 Webpack3 ElementUI Eslint(e...
2018-01-12
性能与生态双突破 HTML5重现爆发曙光
走过早熟的WebAPP,也经历过概念性的“轻应用”,HTML5这个被视作移动互联网未来的技术标准,终于在2015年看到了爆发的曙光。1月 15日,搜狐发布基于HTML5的“手机搜狐网3.0,加上微信几天前开放HTML5接口,HTML5很可能...
2015-11-12
Element el-upload上传组件详解
upload上传是前端开发很常用的一个功能,在Vue开发中常用的Element组件库也提供了非常好用的upload组件。 基本用法 代码: <el-upload :action="uploadActionUrl"&...
2018-03-18
浅谈HTML5对移动广告平台的价值
就像电影盛行时那些电影人不得不面对新崛起的电视媒体带来的巨大冲击一样,如今的传统媒体正在面临互联网的挑战,而且越是年轻化的群体对互联网的依赖越强,近年来飞速增长的移动互联网趋势更甚,已经习惯了24小时手机陪伴的我们已经越来越离不开移动互联网...
2015-11-12
2015年预测:Web体验与以往的五大不同
在过去的一年,我们见证了Uber的崛起、Apple加入了可穿戴设备的竞赛中、以及诸如Facebook收购Whatapp这类大的并购事件。那么在2015年我们将看到哪些巨大的改变?这里列出了五个对未来的预测 更清洁、简单的内容 2013年...
2015-11-11
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊。。。 说说我的破解方法:...
2017-03-13
element-ui中el-tree树形控件-树节点的选择(选中当前节点,获取当前id并且获取其父级id)
在element-ui的el-tree树形控件中默认获取选取当前选中id的方法是this.$refs.tree.getCheckedKeys(); 但是如果子节点不是全部选中的话,父节点算不选中。 由于我们一般想要的是就算只选中一个直接点父...
2018-12-12
回到顶部