css - h1 标签如何使用属性使其响应 - ReactJS

Question

我的应用程序是 ReactJS，我想为 Seo 优化添加一个“h1”标签。这是我的代码:

{showHeader &&
    <Col xs={12} sm={12} style={{textAlign: 'center', minWidth: '130px', paddingTop: "15px"}}>
        <div className="headerTitle">
            <p className='purple'><Translate value={TEXT} dangerousHTML/>
            </p>
        </div>
    </Col>
}

所以，每次我把它放在哪里都无关紧要。在 col、div、p 之间……标题变大或者没有响应。它说在 h1 中不允许使用 xs 和 ms。我尝试类似 <h1 xs={12} 的东西 ...我也尝试过使用 CSS，但它不起作用(可能是我不知道如何)..我想响应， 单词在彼此之下，聚集而不离开模板。字体大小也缩小了。我想保存我的功能，但要有 h1 标签。如果可能，最好不要安装软件包。

Answer 1

Col xs=12 表示 div 将获得 100% 的宽度 Col xs =6 表示 div 将获得宽度的 50%

但是

<Col xs={12}>
  <h1> demo </h1>
</Col> 

和

<Col md={6}>
  <h1> demo </h1>
</Col> 

将具有完全相同的 h1 字体大小，是的，ccols 会修改宽度，但不会字体大小。

为此，您需要媒体查询(将其添加到您的 css 文件中):

@media only screen and (max-width: 600px) {
  h1 {
    font-size: 12px;
  }
}

有问题可以评论