在React中如何实现页面移动端响应式适配 如何编写media queries修改代码

一、React中编写Media Query的3种常用方式 #

• 独立CSS文件编写：最通用的方案，直接在CSS文件中写@media规则即可，和常规前端项目写法一致，适配你当前的使用场景。
• CSS-in-JS库编写：使用styled-components、emotion等库，可以直接在组件内部编写media query规则，样式和组件耦合度高。
• 动态监听视口：自定义Hook或者直接调用window.matchMediaAPI监听视口尺寸，动态切换类名或者内联样式。

二、针对你现有代码的具体修改步骤 #

你当前已经用了Bootstrap的栅格系统，col-sm-6默认在小于576px的设备上会自动占满100%宽度，但你代码里大量写死的内联样式会导致移动端溢出，需要做以下修改：

1. 先新增CSS规则（可以写在项目的全局CSS文件或者对应页面的CSS模块里） #

/* 桌面端默认样式 */
.login-form-col {
  padding-top: 15%;
  padding-right: 130px;
}
.login-title {
  font-size: 24px;
  color: #000;
}
.forgot-pwd-link {
  color: #000;
  font-size: 16px;
}
.login-btn-wrap {
  padding-top: 12%;
}
.login-banner-img {
  width: 125%;
  height: 100%;
}

/* 移动端适配规则，断点可根据需求调整，这里用768px作为平板/手机的分界 */
@media (max-width: 768px) {
  .login-form-col {
    padding-top: 10%;
    padding-right: 15px;
    padding-left: 15px;
  }
  .login-title {
    font-size: 20px;
    text-align: center;
  }
  .forgot-pwd-link {
    font-size: 14px;
    display: block;
    text-align: center;
  }
  .login-btn-wrap {
    padding-top: 8%;
    display: flex;
    justify-content: center;
  }
  .login-banner-col {
    margin-top: 30px;
  }
  .login-banner-img {
    width: 100%;
    height: auto;
  }
}

2. 修改你的JSX代码，替换内联样式为自定义类名 #

<div className = "rock">
   <div className="container" >
      <div className="row">
         {/* 替换原内联样式，新增自定义类login-form-col */}
         <div className="col-sm-6 form-group login-form-col">
         <div className ="Fire"><img src="../img/firelogo.PNG" alt="fire logo" /></div>
         <div className="continer">
            <form method="post" className="form" id="form">
               {/* 新增自定义类login-title */}
               <p className="login-title"> 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>
               {/* 替换原内联样式，新增自定义类forgot-pwd-link */}
               <a className="forgot-pwd-link" href="true">Forgot Password?</a>
               {/* 替换原内联样式，新增自定义类login-btn-wrap */}
               <div className="login-btn-wrap">
               <button className="btn btn-danger mt-4" type="submit">Login</button>
         </div>
         </form>
      </div>
   </div>
   {/* 新增自定义类login-banner-col */}
   <div className="col-sm-6 form-group login-banner-col" style={{width: '100%', height: 'auto', objectFit: 'contain'}}>
   {/* 替换原内联样式，新增自定义类login-banner-img */}
   <img src="../img/Cap1.PNG" alt="banner" className="login-banner-img" />
</div>
</div>
</div> 
</div>

三、可选的其他适配方案 #

如果你不想单独维护CSS文件，也可以用CSS-in-JS的方式实现，以styled-components为例：

1. 先安装依赖：npm install styled-components
2. 编写样式组件：

import styled from 'styled-components'

const FormCol = styled.div`
  padding-top: 15%;
  padding-right: 130px;
  @media (max-width: 768px) {
    padding-top: 10%;
    padding-right: 15px;
    padding-left: 15px;
  }
`

然后直接把JSX里对应的div替换成<FormCol className="col-sm-6 form-group">即可。

如果只是少数样式需要适配，也可以直接用原生API动态判断：

const isMobile = window.matchMedia('(max-width: 768px)').matches
// 在内联样式里动态传值
<div className="col-sm-6 form-group" style={{
  paddingTop: isMobile ? '10%' : '15%',
  paddingRight: isMobile ? '15px' : '130px'
}}>

内容的提问来源于stack exchange，提问作者Dhumila Emkika