Css 手机版（宽度问题）

Question

我需要做这个页面的移动版本。（下面的代码）但是我收到的结果如屏幕截图所示see my mobile version我做了什么？ P.S。如果不是关于 html 结构和 css 的几句话（我刚开始学习如何制作网站）

.row-wrap-left,
.row-wrap-right,
.row-wrap-bottom,
.field-wrap {
 float: none;
 width: 100%;
}

.request-input {
 width: 90%;
}

textarea {
 width: 98%;
}

.button-submit {
 float: none;
 width: 100%;
 margin-bottom: 20px;
}

.button-cancel {
 float: none;
 width: 100%;
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
 
.clearfix:after {
  clear: both;
}

body {
 background: #282828;
 font-family: 'Montserrat', sans-serif;
}

.container {
 background: #27292b;
 max-width: 636px;
}

.request {
 text-align: left;
 position: relative;
 overflow: hidden;
}


.wrapper {
 padding: 36px 85px 60px 85px;
}

.row-wrap-left {
 float: left;
 width: 50%;
 overflow: hidden;
}

.row-wrap-right {
 float: right;
 width: 50%;
 overflow: hidden;
}

.row-wrap-right .field-wrap {
 float: right;
}

.row-wrap-bottom {
 float: left;
 width: 100%;
 overflow: hidden;
}

.field-wrap {
 position: relative;
}

form {
 overflow: hidden;
}

.request-head h1 {
 font-size: 29px;
 text-transform: uppercase;
 color: #fff;
 padding-bottom: 25px;
 border-bottom: solid 1px #47494b;
 margin-bottom: 36px;
}

.request-input {
 width: 195px;
 height: 12px;
 font-size: 18px;
 padding: 14px;
 background: none;
 border: 1px solid #47494b;
 border-radius: 2px;
 margin-top: 17px;
 margin-bottom: 44px; 
}

.request-country,
.request-code {
 width: 33px;
}

.request-number {
 width: 58px;
}

.request-input:focus,
textarea:focus {
 outline: none;
 color: #fff;
 border-color: #fff;
}

.request-input:focus ~ label,
.request-input:focus + span,
textarea:focus + label {
 color: #fff;
}

.field-wrap label {
 color: #434546;
 font-size: 13px;
 display: block;
 position: absolute;
 top: 0;
}

.field-wrap .icon {
 position: absolute;
 top: 30px;
 margin-left: -40px;
 padding-left: 10px;
 color: #434546;
}

textarea {
 width: 460px;
 height: 150px;
 font-size: 18px;
 background: none;
 border: 1px solid #47494b;
 border-radius: 2px;
 margin-top: 17px;
 margin-bottom: 28px;
}

p {
 font-size: 13px;
 color: #434546;
}

a {
 font-size: 13px;
 text-decoration: none;
 color: #fff;
}

.agreement {
 margin-bottom: 30px;
}

.button-submit {
 background: #5d9f81;
    color: #fff;
    border: none;
    padding: 14px 44px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 13px;
    border-radius: 2px;
    margin-right: 18px;
}

.button-cancel {
    background: none;
    color: #434546;
    border: 1px solid #47494b;
    padding: 14px 44px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 13px;
    border-radius: 2px;
}

.button-submit:hover {
 background: #4c876c;
    color: #fff;
    cursor: pointer;
}

.button-cancel:hover {
    background: #5d9f81;
    color: #fff;
    cursor: pointer;
}

input:focus:invalid,
textarea:focus:invalid {
 border: 1px solid #e7635e;
}

input:focus:invalid ~ label {
 color: #da5f5b;
}

input:focus:invalid + span {
 color: #da5f5b;
}

textarea:focus:invalid + label {
 color: #da5f5b;
}

input:required:valid, 
textarea:required:valid {
 border: 1px solid #6abd97;
 color: #6abd97;
}

input:required:valid + label, 
textarea:required:valid + label{
 color: #6abd97;
}

input:required:valid ~ label {
 color: #6abd97;
}

input:required:valid + span {
 color: #6abd97;
}

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Register form</title>
 <link rel="stylesheet" href="css/style.css">
 <link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css">
 <link rel="stylesheet" href="css/small.css" media="(max-width:600px)">
</head>
<body>
 <div class="container clearfix">
  <div class="wrapper clearfix">
   <div class="request clearfix">
    <div class="request-head">
     <h1>Request a demo</h1>
    </div>
    <form action="/" method="post">
     <div class="row-wrap-left">
      <div class="field-wrap">
       <input type="text" name="form_data[first_name]" id="fname" class="request-input request-fname" required autocomplete="off">
       <label for="fname">First Name</label>
      </div>
      <div class="field-wrap">
       <input type="email" name="form_data[email]" id="email" class="request-input request-email" required autocomplete="off">
       <label for="email">Email&nbsp;*</label>
      </div>
      <div class="field-wrap">
       <input type="text" name="form_data[school_organization]" id="school-org" class="request-input request-school" required autocomplete="off">
       <span class="icon"><i class="fa fa-search"></i></span>
       <label for="school-org">School/Organization&nbsp;*</label>
      </div>
     </div>
     <div class="row-wrap-right">
      <div class="field-wrap">
       <input type="text" name="form_data[last_name]" id="lname" class="request-input request-lname" required autocomplete="off">
       <label for="lname">Last Name</label>
      </div>
      <div class="field-wrap">
       <input type="tel"  name="form_data[phone][country]" id="tel" class="request-input request-country" required autocomplete="off" pattern="[0-9]{3}">
       <input type="tel"  name="form_data[phone][code]" id="tel" class="request-input request-code" required autocomplete="off" pattern="[0-9]{2}">
       <input type="tel"  name="form_data[phone][number]" id="tel" class="request-input request-number" required autocomplete="off" pattern="[0-9]{7}">
       <label for="tel">Phone Number</label>
      </div>
      <div class="field-wrap">
       <input type="text" name="form_data[role]" id="role" class="request-input request-role" required autocomplete="off">
       <label for="role">Role on Campus&nbsp;*</label>
      </div>
     </div>
     <div class="row-wrap-bottom">
      <div class="field-wrap">
       <textarea name="form_data[goals]" id="goals" class="label-goals" required autocomplete="off"></textarea>
       <label for="goals">What are your goals for DemoSystem?&nbsp;*</label>
      </div>
      <p class="agreement">
       <input type="checkbox" name="checkbox" id="checkbox" checked>
       <label for="checkbox">
        I agree to the DemoSystem 
        <span>
         <a href="#">Terms of Service</a>
        </span> 
        and 
        <span>
         <a href="#">Privacy Policy</a>
        </span>
       </label>
      </p>
      <div class="field-wrap">
       <button class="button-submit">Submit</button>
       <button class="button-cancel">Cancel</button>
      </div>
     </div>
    </form>
   </div>
  </div>
 </div>
</body>
</html>

Answer 1

您可以在 css 中使用媒体查询。

媒体查询允许您根据屏幕尺寸更改css。

@media screen and (max-width: 750px) {
    /* your new Css here */
}

在 max-width 参数之后输入所需的宽度。

如果 max-width 参数设置为 750px，只要屏幕尺寸低于 750px，代码就会激活。

然后你可以把所有现有的 css 选择器已经用于更高的屏幕并使它们具有新的值。

将媒体查询代码放在你css样式的底部sheet。

您可以在同一代码中使用多个媒体查询。

示例：

@media screen and (max-width: 1150px) {
    /* your new Css for tablet here */
}
@media screen and (max-width: 750px) {
    /* your new Css for smart phone here */
}

此外，强烈建议将下面的代码添加到 html 代码

的头部

<meta name="viewport" content="width=device-width, initial-scale=1">

如有需要欢迎随时询问。

Answer 2

在小 css 你必须为输入指定一个新的宽度 #id:

#tel{
  width:25%;
}

结果：jsfiddle

Css 手机版（宽度问题）

Css mobile version (trouble with width)

css

media

width