h1 标签如何获取属性以使其响应 - ReactJS

Question

我的应用是 ReactJS，我想添加一个“h1”标签来进行 Seo 优化。这是我的代码：

{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、divs、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;
  }
}

这里有问题可以评论