摘要:原文链接单位单位是基于的继承来计算的同样使用,其他属性相同的比例,不同的计算结果使用单位时,等属性是基于当前元素的计算。
原文链接
em单位</>复制代码
em单位是基于font-size的继承来计算的
</>复制代码
.parent {
font-size: 16px;
}
.parent > .child {
font-size: 1.2em; /* 19.2px */
}
同样使用em,font-size vs 其他属性
</>复制代码
相同的比例,不同的计算结果;
使用em单位时,margin、padding等属性是基于当前元素的font-size计算。而当前元素的font-size则是基于父元素。
</>复制代码
.tile {
font-size: 1.2em; /* 19.2px */
margin: 1.2em; /* 23.04px */
padding: 1.2em; /* 23.04px */
border-radius: 1.2em; /* 23.04px */
}
深度嵌套em
导致文本收缩问题
</>复制代码
ul {
font-size: 0.8rem;
}
解决办法 rem
</>复制代码
"Root em" - 相对于根节点()的font-size来计算
使用rem
</>复制代码
ul {
font-size: 0.8rem;
}
建议
其他</>复制代码
默认情况下:
rem用作font-size单位,
px用作border-width单位,
em用作padding,margin,border-radius等等
为line-height使用无单位的数字
em还有很多优点</>复制代码
使用单位:一个混合计算的结果
无单位:根据后代的font sizes自动变化
[希望的尺寸]/[基础尺寸]</>复制代码
更精确
代码简单
更好的适应性
</>复制代码
14px / 16px = 0.875em
18px / 14px = 1.2857em
pxtoem.com
type-scale.com
可调整尺寸的模块 改变尺寸调整px是沉闷的 在一个容器上,确定一个fontsize基础值 在模块的根节点上使用rem,其他全部使用em</>复制代码
使用标量去计算px单位的font sizes,再转换为一个em标量
使用rem作为全局尺寸单位
使用em作为区域尺寸单位
</>复制代码
.tile {
border: 2px solid #000;
padding: 0.6em 1.2em;
border-radius: 0.3em;
margin-bottom: 1em;
font-size: 1rem;
}
.tile__title {
font-size: 0.8em;
text-transform: uppercase;
}
demo
缩放形状</>复制代码
.dropdown__toggle::after {
content: "";
position: absolute;
right: 1em;
top: 1em;
border: 0.3em solid;
border-color: black transparent transparent;
}
demo
缩放图标/图片</>复制代码
.twitter > img {
height: 1em;
width: 1em;
vertical-align: -0.1em;
}
demo
缩放阴影</>复制代码
a:link {
text-decoration: none;
box-shadow: inset 0 -0.1em 0 0 #cef;
transition: box-shadow 0.2s ease-in-out;
color: #346;
}
a:hover {
box-shadow: inset 0 -1.2em 0 0 #cef;
}
demo
一些秘诀 可以缩放断点</>复制代码
:root {
font-size: 0.8em;
}
@media (min-width: 35em) {
:root {
font-size: 1em;
}
}
@media (min-width: 50em) {
:root {
font-size: 1.25em;
}
}
视图相关的单位
</>复制代码
vw - 视图宽度的1%
vh - 视图高度的1%
vmin - vh/vw中较小的那个
vmax - vh/vw中较大的那个
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/115435.html
摘要:值得注意的是,这个设置对使用或其他绝对单位定义的字号大小无效。事实上,提供了一个在和间的相对单位折中解决方案,而且更易于使用。图使用相对单位和继承字号的面板下面是模板,加到你的页面吧。 showImg(https://segmentfault.com/img/bVbdOMr?w=920&h=450); 前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》,其...
摘要:相对单位的值会根据外部影响因素的变化而变化。很自然,相对单位使用起来会比较困难。在本章中,我将揭开相对单位的神秘面纱。重点来了,使用相对单位声明的值会由浏览器转化为一个绝对值,我们称之为计算值。 showImg(https://segmentfault.com/img/bVbdtsA); 前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》,其中的第二章《W...
摘要:但是定时器没关。通过变量来控制定时器内函数的执行停止播放默认为。方式三通过关闭定时器来停止轮播图的运动。,通过传入定时器的编号来。清除定时器,再开启定时器。所以,每次打开定时器,先清除前一个。点击页面任何一个位置关闭定时器。 1.定时器 定义:当我们需要隔一段时间,再执行一段代码。或者每隔一段时间,执行一段代码。我们可以使用定时器。使用场景:例如网站轮播图的自动滚动。广告延迟弹出的某些...
阅读 1059·2021-11-22 12:09
阅读 3839·2021-09-27 13:36
阅读 1547·2021-08-20 09:37
阅读 4231·2019-12-27 12:22
阅读 2478·2019-08-30 15:55
阅读 2499·2019-08-30 13:16
阅读 2958·2019-08-26 17:06
阅读 3555·2019-08-23 18:32