告别固定字体大小:CSS使用相对单位提升网页可访问性和兼容性
/* 使用相对单位设置元素的字体大小,以便于用户的阅读体验和兼容不同设备 */
body {
font-size: 16px; /* 默认字体大小 */
font-family: "Helvetica Neue", Arial, sans-serif;
}
/* 为标题设置相对于基本字体大小的大小 */
h1 {
font-size: 1.5em; /* 相对于父元素的字体大小的1.5倍 */
}
/* 为正文内容设置相对于基本字体大小的大小 */
p {
font-size: 0.875em; /* 相对于基本字体大小的0.875倍,约等于14px */
}
/* 为小字体的元素设置更小的字体大小 */
small {
font-size: 0.75em; /* 相对于基本字体大小的0.75倍 */
}
/* 为强调文本设置更大的字体大小 */
strong {
font-size: 1.2em; /* 相对于父元素的字体大小的1.2倍 */
}
这段代码展示了如何使用相对单位(em和rem)来设置字体大小,这样可以使得字体大小相对于基础字体大小或者父元素的字体大小进行调整,有利于提高网页的可访问性和兼容性。
评论已关闭