极客笔记CSS pc分辨率字体大小
在本文中，我们将介绍如何根据PC分辨率设置合适的字体大小，让网页更舒适易读。CSS中的px（像素）是固定的单位，设置的字体大小有时会在高分辨率屏幕（Retina显示器）上显得太小或者太大。因此，我们需要在不同的分辨率下，对字体大小进行适当的调整。
阅读更多：CSS 教程
em 单位
一般来说，网页字体大小默认是16px。为了避免固定像素大小，在CSS中，我们可以使用em单位。em单位是相对于父元素字体大小的倍数。例如，如果父元素字体大小为16px，子元素字体大小为1.5em，则子元素字体大小将是父元素字体大小的1.5倍，即24px。
.parent {
font-size: 16px;
}
.child {
font-size: 1.5em; /* 24px */
}
em单位在相对于固定像素大小的字体设置上很有用，但并不适用于PC分辨率的调整。
rem 单位
rem单位是根据根（<html>）元素的字体大小来计算的。与em单位不同，rem单位不会基于元素的字体大小而改变。因此，使用rem单位来设置字体大小，即使在不同的分辨率下，也会保持它们的相对大小。
例如，以下代码设置根元素字体大小为16px，子元素字体大小为1rem，则子元素字体大小将与父元素无关，而是根据根元素字体大小计算得出。
html {
font-size: 16px;
}
.parent {
font-size: 1.2rem; /* 19.2px */
}
.child {
font-size: 1rem; /* 16px */
}
在使用rem单位时，我们可以比em单位更容易地应对不同分辨率的显示问题。因为我们只需要在根元素中设置一个合理的字体大小，然后根据情况调整其他元素的rem单位大小。这样在不同的分辨率下相对大小都可以得到保持。
vw 单位
除此之外，我们还可以使用vw（viewport width）和vh（viewport height）单位进行设置。vw单位设置的是视窗的百分比宽度，即1vw等于视窗宽度的1%。vh单位类似，只不过是根据视窗的百分比高度进行计算。
h1 {
font-size: 5vw;
}
上述代码设置<h1>元素的字体大小为视窗宽度的5%。这种情况下，字体大小会随着视口的大小而改变，但在同一视口下，字体大小相对位置不变。对于可以根据视口大小进行适应的页面，这将是一种非常有用的方案。
calc() 函数
我们还可以使用calc()函数在不同的字体单位之间进行转化。例如，可以将根元素字体大小设置为视窗宽度的百分比，除以一个固定比例得到字体大小的像素值。
html {
font-size: calc(100vw / 100);
}
h1 {
font-size: calc(2.5rem + 2vw);
}
上述代码将根元素字体大小设置为视窗宽度的1%，然后将<h1>元素字体大小设置为2.5rem加上字体大小视窗宽度的2%的大小。
总结
以上介绍了如何根据PC分辨率设置合适的字体大小。使用em、rem、vw单位以及calc()函数，我们可以更好地适应不同分辨率的设备，提供更佳的用户体验。在设计PC网页时，一定要合理利用这些CSS单位，以确保网页的舒适易读性。