我正在使用反应当我在手机上查看时，有什么方法可以使这个 html 代码响应它不能正确查看答案

【问题标题】：I am using react Is there any way to make this html code responsive its not viewing correctly when I se on mobiles我正在使用反应当我在手机上查看时，有什么方法可以使这个 html 代码响应它不能正确查看
【发布时间】：2021-06-10 11:01:19
【问题描述】：

我正在使用 react js，我想让这个 html 代码在手机上响应，我该怎么做，可能需要媒体查询，但是如何编写媒体查询反应我应该在这个代码上添加或更改什么来使它响应式

<div className = "rock">
   <div className="container" >
      <div className="row">
         <div className="col-sm-6 form-group" style={{paddingTop: '15%', paddingRight: "130px"}}>
         <div className ="Fire"><img   src="../img/firelogo.PNG" alt="try again" /></div>
         <div className="continer">
            <form method="post" className="form" id="form">
               <p style={{fontSize: '24px'}}> Login </p>
               <div className="txt_field">
                  <input type="text" required  name="employeeid" id="employeeid" />
                  <span></span>
                  <label>Employee ID</label>
               </div>
               <div className="txt_field">
                  <input type="password" required  name="password" id="password" />
                  <span></span>
                  <label>Password</label>
               </div>
               <a style = {{color: "black", fontSize: "16px"}} href ="true">Forgot Password?</a>
               <div style ={{paddingTop: "12%"}}>
               <button className="btn btn-danger mt-4" type="submit">Login</button>
         </div>
         </form>
      </div>
   </div>
   <div className="col-sm-6 form-group" style={{width: '100%', height: 'auto', objectFit: 'contain'}}>
   <img src="../img/Cap1.PNG" alt="try again" style ={{width: "125%", height: "100%"}} />
</div>
</div>
</div> 
</div>

【问题讨论】：

你有CSS代码吗？
是的，我写了一个 CSS 代码

标签： html css reactjs

【解决方案1】：

媒体查询没有内置到 React 库中。

你可以：

使用必须在您的<head> 中链接的外部 css 文件并具有适当的样式
使用类似的库：https://material-ui.com/components/use-media-query/

【讨论】：