停止使用px单位吧

Cheng_Gang 发布于2019-08-30 13:16 / 2498人阅读

摘要：原文链接单位单位是基于的继承来计算的同样使用，其他属性相同的比例，不同的计算结果使用单位时，等属性是基于当前元素的计算。

原文链接

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使用无单位的数字

</>复制代码 
使用单位：一个混合计算的结果
无单位：根据后代的font sizes自动变化

em还有很多优点

</>复制代码 
更精确
代码简单
更好的适应性

[希望的尺寸]/[基础尺寸]

</>复制代码 
14px / 16px = 0.875em
18px / 14px = 1.2857em

pxtoem.com

印刷排版的基础 - Robert Bringhurst

好看的印刷排版一般用的是比率

type-scale.com

对于web印刷排版有着相同的处理

</>复制代码 
使用标量去计算px单位的font sizes，再转换为一个em标量

可调整尺寸的模块 改变尺寸调整px是沉闷的

在一个容器上，确定一个fontsize基础值

在模块的根节点上使用rem,其他全部使用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中较大的那个

GPU云服务器云服务器阿里云停止服务器不会影响数据吧停止使用停止使用ecs 阿里云服务器停止使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115435.html

停止使用px单位吧

摘要：原文链接单位单位是基于的继承来计算的同样使用，其他属性相同的比例，不同的计算结果使用单位时，等属性是基于当前元素的计算。原文链接 em单位 em单位是基于font-size的继承来计算的 .parent { font-size: 16px; } .parent > .child { font-size: 1.2em; /* 19.2px */ } 同样使用em，font-...

RobinQu 2019-08-01 16:06 评论0 收藏0
如何更愉快地使用rem —— 别说你懂CSS相对单位

摘要：值得注意的是，这个设置对使用或其他绝对单位定义的字号大小无效。事实上，提供了一个在和间的相对单位折中解决方案，而且更易于使用。图使用相对单位和继承字号的面板下面是模板，加到你的页面吧。 showImg(https://segmentfault.com/img/bVbdOMr?w=920&h=450); 前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》，其...

Snailclimb 2019-08-30 15:54 评论0 收藏0
如何更愉快地使用em —— 别说你懂CSS相对单位

摘要：相对单位的值会根据外部影响因素的变化而变化。很自然，相对单位使用起来会比较困难。在本章中，我将揭开相对单位的神秘面纱。重点来了，使用相对单位声明的值会由浏览器转化为一个绝对值，我们称之为计算值。 showImg(https://segmentfault.com/img/bVbdtsA); 前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》，其中的第二章《W...

gekylin 2019-08-30 15:54 评论0 收藏0
JS基础入门篇（十三）—定时器

摘要：但是定时器没关。通过变量来控制定时器内函数的执行停止播放默认为。方式三通过关闭定时器来停止轮播图的运动。，通过传入定时器的编号来。清除定时器，再开启定时器。所以，每次打开定时器，先清除前一个。点击页面任何一个位置关闭定时器。 1.定时器定义：当我们需要隔一段时间，再执行一段代码。或者每隔一段时间，执行一段代码。我们可以使用定时器。使用场景：例如网站轮播图的自动滚动。广告延迟弹出的某些...

kaka 2019-08-29 15:31 评论0 收藏0

发表评论

登陆后可评论

0条评论

Cheng_Gang

男|高级讲师

我要关注我要私信

TA的文章

深刻理解Spring声明式事务

阅读 1059·2021-11-22 12:09
盘点 9 月份 yyds 的开源项目

阅读 3839·2021-09-27 13:36
PacificRack：洛杉矶机房Windows VPS年付12美元起

阅读 1547·2021-08-20 09:37
基于NVMe SSD的分布式文件存储UFS性能提升技术解析

阅读 4231·2019-12-27 12:22
js 实现上下拖动改变父 div 的高度，左右上下拖动动态分割孩子的宽高

阅读 2478·2019-08-30 15:55
停止使用px单位吧

阅读 2499·2019-08-30 13:16
UCloud云主机安装Cloudera

阅读 2958·2019-08-26 17:06
如何使用 Set 来提高代码的性能

阅读 3555·2019-08-23 18:32

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

停止使用px单位吧

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

相关文章