html - 如何将完整网站的 em 设置为 10px

标签 html css font-size

我正在为响应式网站创建模板。我了解到 em 非常适合用于响应式设计。

但问题是我将 body 字体大小设置为 62.5%,但是当我使用 p、span 和其他元素时,字体大小如 2em 比 2em 不同于 20px。根据我的默认字体大小,正文中的任何位置都应为 2em=20px,因为 62.5% 会将默认的 1em=16px 覆盖为 10px。

请建议我应该更改什么,以便在我将任何元素的 font-size 设置为 2em 时,整个 body 将与 20px 相同。

最佳答案

BODY {font-size:62.5%}

这需要 16px 到 10px。从现在开始,很容易以像素为单位思考,但仍然以 em 为单位设置尺寸:1em 为 10px,0.8em 为 8px,1.6em 为 16px,等等。

.element {  
    font-size: 20px;  
    width: 4em;  
    height: 4em;  
} 

这意味着元素的宽度和高度(此处定义为 4em x 4em)将计算为 80px x 80px (20px * 4 = 80px)。

Read 1 Read 2

关于html - 如何将完整网站的 em 设置为 10px,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23076283/

相关文章:

html - 我如何设置下一个 img 标签的 div 高度?

Tinymce - 使用 bbcodes 的字体大小问题

jquery - 如何将 2 个或多个 jquery keydown 函数合并为一个函数?

css - 如何在 rtl 中的第一个 child 上设置 margin none?

html - 如何找出并删除未使用的 CSS 代码?

css - 影响不存在类的媒体查询

jquery - 使用单个规则放大所有文本的字体大小(以%为单位)?

javascript - 获取 JS 中 DOM 元素的计算字体大小

javascript - 如何限制文本区域 HTML 中的单词而不是字符

html - 无法在 html 输入文本框中插入空格