代码之家 › 专栏 › 技术社区 › Borhen Kalboussi

任何设备上的响应性html和css代码

reactjs css html

Borhen Kalboussi · 技术社区 · 3 年前

我想让我的屏幕对任何类型的设备都有响应,所以我的代码在大屏幕上显示得非常好,但与年轻的屏幕不同,所以我希望我的屏幕适合所有尺寸。我花了很多时间瞄准它,但在我的代码中找不到任何解决方案:

* {
  box-sizing: border-box;
  padding: 0%;
  margin: 0%;
  background-color: #dfe3ee;
}

.text {
  float: left;
  margin-top: 200px;
  margin-left: 160px;
  font-size: 2rem;
  font-family: sans-serif;
  color: rgb(100, 5, 5)
}

form {
  border: 3px solid #f1f1f1;
  width: 30%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  margin-top: 5rem;
  margin-right: 250px;
  float: right;
}

input[type=text],
input[type=password] {
  width: 90%;
  padding: 8px 12px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

button {
  background-color: #04AA6D;
  color: white;
  padding: 8px 10px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

button:hover {
  opacity: 0.8;
}


/* Extra style for the cancel button (red) */


/* Center the avatar image inside this container */

.container {
  padding: 16px;
}


/* The "Forgot password" text */

span.psw {
  float: right;
  padding-top: 16px;
}

@media screen and (max-width: 600px) {
  span.psw {
    display: block;
    float: right;
  }
  .form {
    border: 3px solid #f1f1f1;
    width: 30%;
    display: flex;
  }
}

import {Link} from "react-router-dom"; const RegisterPage =() => { return (
<div>
  <div className="text">
    <h1>Private</h1>
  </div>
  <form>


    <div class="container">
      <label for="uname"><b>Username</b></label>
      <input type="text" placeholder="Enter Username" name="uname" required />

      <label for="psw"><b>Password</b></label>
      <input type="password" placeholder="Enter Password" name="psw" required />

      <button type="submit">Login</button>
      <label>
            <input type="checkbox" checked="checked" name="remember" /> Remember me
          </label>
    </div>

    <div className="container" style={{ "backgroundColor": "#f1f1f1"}}>

      <a href="">Forgot password?</a>
      <div className="btn">
        <button>Create New Account</button>
      </div>
    </div>
  </form>
</div>
) }; export default RegisterPage;

1 回复 | 直到 3 年前

Evren 3 年前

看看这个,我补充道 flexbox 并用 flexbox 并删除了页边空白。记住我变了 className 具有 class 对于剪断,对于在当地进行的测试,您应该再次使用 类名

* {
 box-sizing:border-box; 
  padding: 0%;
  margin: 0%;
  background-color: #dfe3ee;
}

.mainDiv {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.text{
  float: left;
  font-size: 2rem;
  font-family: sans-serif;
  color:rgb(100, 5, 5)
}

form {
  border: 3px solid #f1f1f1;
  width: 30%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}


input[type=text], input[type=password] {
  width: 90%;
  padding: 8px 12px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}


button {
  background-color: #04AA6D;
  color: white;
  padding: 8px 10px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}


button:hover {
  opacity: 0.8;
}

/* Extra style for the cancel button (red) */


/* Center the avatar image inside this container */





.container {
  padding: 16px;
}

/* The "Forgot password" text */
span.psw {
  float: right;
  padding-top: 16px;
}


@media screen and (max-width: 600px) {
  .mainDiv {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .text {
    margin-left: 0;
  }
  span.psw {
    display: block;
    float: right;
  }
  form{
    border: 3px solid #f1f1f1;
    width: 30%;
    display: flex;
    float: none;
    margin-right: 0;
    min-width: 250px;
  }
}

<div class="mainDiv">
           <div class="text" >
      <h1>Private</h1>
      </div>
        <form >
      
        
        <div class="container">
          <label for="uname"><b>Username</b></label>
          <input type="text" placeholder="Enter Username" name="uname" required />
      
          <label for="psw"><b>Password</b></label>
          <input type="password" placeholder="Enter Password" name="psw" required />
      
          <button type="submit">Login</button>
          <label>
            <input type="checkbox" checked="checked" name="remember" /> Remember me
          </label>
        </div>
      
        <div className="container" style={{"backgroundColor":"#f1f1f1"}}>
         
          <a href="" >Forgot password?</a>
          <div className="btn" >
          <button >Create New Account</button>
          </div>
        </div>
      </form>
      </div>