响应式网站应该如何选择 CSS 单位?
在开发需要适配各种设备的响应式网站时,正确了解的 CSS 范围很重要。在做具体的决策之前,我们对它们先分个类:
绝对单位 px - 像素:1px = 1/96th of 1in pt - 点:1pt = 1/72th of 1in pc - 十二点活字:1pc = 1/16th of 1in in - 英寸:1in = 2.54cm = 96px cm - 厘米:1cm = 96px/2.54 mm - 毫米:1mm = 1/10th of 1cm 百分比单位 百分比 % 相对单位 vw vh vmax vmin em rem - 根 em 相对于字体大小 相对于查看端口/文档
下面是一些最常见的单位:
px
绝对像素单位仅用于屏幕(界面),其余单位用于打印。px 单位不是一个好的选择,无论你选择什么屏幕尺寸,px 单位的尺寸都是固定的。这就是为什么边框总是首选 px 单位的原因,因为边框在所有屏幕尺寸上也保持固定。
百分比
用于设置元素的宽度时,它总是相对于其直接父元素的大小。如果没有定义的父级,则默认情况下 body 会被视为父级。
考虑一个宽度为 500px 的盒子,里面有一个 h1 元素:
.box{
width: 500px;
border: 1px solid crimson;
padding: 10px;
}
h1{
width: 50%;
border: 1px solid;
}
如果没有定义父级,那么 root 将被视为默认父级。
em
em
总是相对于它的直接父级的字体大小。1em == 父字体大小的大小
。如果没有覆盖,默认字体大小为 16px
,假设在父元素中字体大小为 48px
,然后在子元素中为 1em == 48px
。
h1{
font-size: 1em; /* now 1em == 16px */
}
.container{
font-size: 48px;
/* or 3em, because default font-size is 16px
& it's parent is body so, 3*16px will be 48px */
}
h1{
font-size: 1em; /* now 1em == 48px */
}
我们可以将这个单元用于边距和填充,因为它可以让我们根据元素的字体大小在框周围使用灵活的间距。因此,元素 font-size
会根据设备大小而变化,元素周围的间距也将分别发生变化。
rem
r 代表根 em
,与 em
不同,它总是相对于根字体大小,无论它的下一个父元素具有什么字体大小。如果根已经重新定义了字体大小,如 60px
那么 1rem == 60px
。
html{
font-size: 60px;
}
.container{
font-size: 16px;
}
h1{
font-size: 1rem;
}
vw
vw
代表视口宽度,这意味着 vw
总是相对于根宽度的 1%
,与父元素的宽度无关。所以,如果 1vw == 1%
那么 100vw == 100% 视口宽度
。
让我们考虑以下示例,其中一个子项的宽度相对于父项的大小,而另一个子项的宽度相对于根。
.container{
width: 600px;
border: 2px solid black;
text-align: center;
font-size: 20px;
}
.box1{
width: 100%;
background: skyblue;
}
.box2{
width: 70vw;
background: pink;
}
vh
vh
代表 viewprot
高度,如 vw
它也相对于 根/文档的 1% 高度
。
让我们考虑以下示例,其中一个子元素的高度与父级大小有关,而另一个子元素的高度与根相关。
.container{
border: 2px solid;
font-size: 40px;
width: 800px;
height: 400px;
display: flex;
text-align: center;
margin: 0 auto;
}
.box1{
height: 100%;
width: 50%;
background: skyblue;
}
.box2{
height: 100vh;
background: pink;
width: 50%;
}
总结
px:边框的像素单位。 % 相对于父级的宽度单位。 相对于元素字体大小的边距和填充的 em 单位。 相对于根的字体大小的 rem 单位。 vw 和 vh 表示相对于根的宽度和高度。
上面六种就是在响应式网站中最常用的五个单位,它们分别适用与不同的场景,通常我们需要组合使用。
推荐阅读:
每日打卡赢积分兑换书籍入口