html - 字体未使用 rems 调整大小

标签 html css responsive-design

它应该很简单,但无论出于何种原因,rem 都不适合我。

比如我有

    <div id="big_paragraph">
        <p>I will make sure you get upvoted,</p>
        <p>if you answer this simple question</p>
        <p>for me. Thanks!</p>
    </div><!-- big_paragraph -->

我希望字体大小能够响应,所以在我的 CSS 中有

* {
    margin:0;
    padding:0;
    border:none;
}

html{
    font-size: 62.5%;
/* I also tried font-size: 16px; to no avail */
}

body{
    font-family: 'Muli', sans-serif;
}

#big_paragraph{
    margin-top:101px;
    font-size: 4.1rem;/*41px*/
    text-align:center;
}

我不知道这是否重要,但我的 html 的头部部分也有以下内容

<meta name="viewport" content="width=device-width, initial-scale=1.0">

最佳答案

这应该可行,但可能只适用于现代浏览器。

.some-paragraph{
    font-size: 5vw !important;
}

关于html - 字体未使用 rems 调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45335625/

相关文章:

css - MVC Webgrid,是否可以将 css 样式添加到单个列标题?

ruby - Grunt/Bundler 不会使用指定的 sass 版本

html - 当字体大小已经在 HTML 代码中定义时,我可以相对调整字体大小吗?

html - 电子邮件模板样板 - 无法设置行高

javascript - 无法在 JQUERY 中重置()

javascript - 用 CSS 和一点 JS 来设计输入类型文件的样式,这样可以吗?

html - 如何在 CSS 内容属性中混合 url 字符串和属性值?

jquery - Animate.css 动画不工作

css - 无法使用更少的 PHP 解析媒体查询

css - 如何让标题中的横幅流到 Logo 后面?需要有反应