如何使用媒体查询使表单响应所有设备

Question

我使用 HTML 和 CSS 创建了一个简单的表单，但是当我尝试通过调整宽度在浏览器上检查它时，一切都变得不对劲，即我希望网站的响应能力能够智能地将组件缩放到更小的屏幕尺寸。

Sorry I am currently not afforded the opportunity to post images in questions yet

这是我的不同宽度的表单：

initial @1903px (as expected)

adjusted @1619px (as expected)

adjusted @1164px (not as expected i.e. distribute, buy and sell should maintain some distance away from the margin of fullname)

adjusted @1103px (not as expected i.e. distribute, buy and sell should be together)

adjusted @784px (not as expected i.e. distribute, buy and sell should be together)

adjusted @483px (not as expected i.e. distribute, buy and sell should be together, drop-down-arrow for distribution-route falls out of place)

HTML 代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form</title>
  
    

</head>
<body>
 
    <!--Form-->
    <section class="applicant">
        <div class="login-center">
            <div class="text">
                <h2>CREATE</h2>
            </div>
            <div class="links">
                <button type="button" class="app-button active">Distribute</button>
                <button type="button" class="app-button">Buy</button>
                <button type="button" class="app-button">Sell</button>
                
            </div>
            <div class="form-u">
                <form action="" class="form">
                     
                    
                    <label for="uname"><b>Full Name:</b></label>
                    <input type="text" name="student matric no"placeholder="Enter full name"required>

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

                     
                    <label for="sem"><b>Location:</b></label>
                    <div class="selector">
                      <div id="selectField">
                        <p id="selectText">Select a Location</p>
                        <img src="logo/arrow_down.png" alt="" id="arrowIcon">
                      </div>
                    </div>

                    <button type="submit" class="button-u">SUBMIT</button>
                   
                     
                 
                    
              

                   


                    
                </form>


                

            </div>
            


        </div>

    </section>

 <!--Here is the CSS:-->
<style>
* {
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  padding: 0;
  margin: 0;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  display: flex;
  font-size: 16px;
  user-select: none;
}

/* APPLICATION */
.applicant {
  width: 60%;
  margin: auto;
  text-align: left;
  margin: 90px auto;
  padding-top: 100px;
  padding-bottom: 100px;
}
.login-center {
  height: 100%;
  flex-basis: 41%;
  background: #ffffff;
  padding: 35px 5px 0px 5px;
  box-sizing: border-box;

  box-shadow: 0 0 50px 0px #e1e1e1;
}
.text h2 {
  text-align: center;
  font-size: 35px;
  font-weight: 600;
  color: #000;
}
.links {
  text-align: center;
  margin-left: -20px;
  margin-right: -20px;
  margin: 0 auto;
  padding-top: 50px;
}
.app-button {
  color: #c4c4c4;
  background-color: #ffffff;
  border: 1px solid #000;
  font-weight: bold;
  font-size: 17px;
  width: 200px;
  margin: 0 20px;
  display: inline-block;
  line-height: 40px;
  padding: 5px;
  cursor: pointer;
}
.app-button:hover {
  background: #c4c4c4;
  color: #000000;
  transition: 0.5s;
}
/* ACTIVE STATE */
.links .active,
.app-button:hover {
  border: 1px solid #c4c4c4;
  background-color: #c4c4c4;
  color: #000;
}

/* FORM */
.form input::placeholder {
  font-size: 14px;
  color: #000;
}
.form label {
  color: #000;
  margin: 20px 0;
  font-size: 17px;
}
.form-u {
  margin: 70px 0;
  padding: 0px 100px;
}
.form input {
  width: 100%;
  padding: 20px;
  margin: 20px 0;
  box-sizing: border-box;
  border: none;
  outline: none;
  background: #ffffff;
  border: 1.7px solid #e1e1e1;
}
.form input:focus {
  border-color: #c4c4c4;
  box-shadow: 0 0 15px 0px #e1e1e1;
}
.button-u {
  color: #c4c4c4;
  background-color: #000;
  border: 1px solid rg#c4c4c4;
  font-weight: bold;
  font-size: 17px;
  width: 100%;
  margin: 40px 0;
  display: inline-block;
  line-height: 40px;
  padding: 5px;
  cursor: pointer;
}
/* DROPDOWN FOR LOCATION*/
.form input {
  font-size: 15px;
  color: #000;
}
.selector {
  width: 100%;
  padding-top: 20px;
  margin-bottom: 25px;
  position: relative;
}
#selectField p {
  font-size: 15px;
}
#selectField {
  width: 100%;
  background: #ffffff;
  box-sizing: border-box;
  border: 1px solid #c4c4c4;
  padding: 20px 20px;
  color: #000;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  position: relative;
}

/*RESPONSIVE*/
/* WHAT DO I DO ? */
</style>

我的目标是使用媒体查询使表单在所有屏幕上响应，请问如何使我的表单智能响应？希望有人能帮忙:)

Answer 1

您可以使用 vw、vh、vmin 和 vmax 单位以相对于视口大小调整内容大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form</title>
  
    

</head>
<body>
 
    <!--Form-->
    <section class="applicant">
        <div class="login-center">
            <div class="text">
                <h2>CREATE</h2>
            </div>
            <div class="links">
                <button type="button" class="app-button active">Distribute</button>
                <button type="button" class="app-button">Buy</button>
                <button type="button" class="app-button">Sell</button>
                
            </div>
            <div class="form-u">
                <form action="" class="form">
                     
                    
                    <label for="uname"><b>Full Name:</b></label>
                    <input type="text" name="student matric no"placeholder="Enter full name"required>

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

                     
                    <label for="sem"><b>Location:</b></label>
                    <div class="selector">
                      <div id="selectField">
                        <p id="selectText">Select a Location</p>
                        <img src="logo/arrow_down.png" alt="" id="arrowIcon">
                      </div>
                    </div>

                    <button type="submit" class="button-u">SUBMIT</button>
                   
                     
                 
                    
              

                   


                    
                </form>


                

            </div>
            


        </div>

    </section>

 <!--Here is the CSS:-->
<style>
* {
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  padding: 0;
  margin: 0;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  display: flex;
  font-size: 1vw;
  user-select: none;
}

/* APPLICATION */
.applicant {
  width: 60%;
  margin: auto;
  text-align: left;
  margin: 6.2vw auto;
  padding-top: 6.5vw;
  padding-bottom: 6.5vw;
}
.login-center {
  height: 100%;
  flex-basis: 41%;
  background: #ffffff;
  padding: 2.5vw 0.2vw 0px 0.2vw;
  box-sizing: border-box;

  box-shadow: 0 0 50px 0px #e1e1e1;
}
.text h2 {
  text-align: center;
  font-size: 3vw;
  font-weight: 600;
  color: #000;
}
.links {
  text-align: center;
  margin-left: -1.3vw;
  margin-right: -1.3vw;
  margin: 0 auto;
  padding-top: 3.2vw;
}
.app-button {
  color: #c4c4c4;
  background-color: #ffffff;
  border: 1px solid #000;
  font-weight: bold;
  font-size: 1vw;
  width: 13vw;
  margin: 0 1.3vw;
  display: inline-block;
  line-height: 2.6vw;
  padding: 0.2vw;
  cursor: pointer;
}
.app-button:hover {
  background: #c4c4c4;
  color: #000000;
  transition: 0.5s;
}
/* ACTIVE STATE */
.links .active,
.app-button:hover {
  border: 1px solid #c4c4c4;
  background-color: #c4c4c4;
  color: #000;
}

/* FORM */
.form input::placeholder {
  font-size: 1vw;
  color: #000;
}
.form label {
  color: #000;
  margin: 1.3vw 0;
  font-size: 1vw;
}
.form-u {
  margin: 4.5vw 0;
  padding: 0px 6.5vw;
}
.form input {
  width: 100%;
  padding: 1.3vw;
  margin: 1.3vw 0;
  box-sizing: border-box;
  border: none;
  outline: none;
  background: #ffffff;
  border: 1.7px solid #e1e1e1;
}
.form input:focus {
  border-color: #c4c4c4;
  box-shadow: 0 0 15px 0px #e1e1e1;
}
.button-u {
  color: #c4c4c4;
  background-color: #000;
  border: 1px solid rg#c4c4c4;
  font-weight: bold;
  font-size: 1vw;
  width: 100%;
  margin: 2.6vw 0;
  display: inline-block;
  line-height: 2.5vw;
  padding: 0.3vw;
  cursor: pointer;
}
/* DROPDOWN FOR LOCATION*/
.form input {
  font-size: 1vw;
  color: #000;
}
.selector {
  width: 100%;
  padding-top: 1.3vw;
  margin-bottom: 1.5vw;
  position: relative;
}
#selectField p {
  font-size: 1vw;
}
#selectField {
  width: 100%;
  background: #ffffff;
  box-sizing: border-box;
  border: 1px solid #c4c4c4;
  padding: 1.3vw 1.3vw;
  color: #000;
  font-size: 1vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  position: relative;
}

/* I only used vw here, but it's not necessarily the best approach */
</style>

如果您需要更多说明，可以快速查找 CSS Units 和 google。

此外，如果您需要知道视口大小：What is my viewport。

Answer 2

你的问题是如何使用媒体查询，对吧？
这真的很简单。假设我有一个宽度为 200px 的按钮。
并且我希望宽度按钮在较小的设备中变得更小。

/* // Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    button{
        width: 100px;
    }
}

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    button{
        width: 150px;
    }
}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) { 
    button{
        width: 180px;
    }
}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) { 
    button{
        width: 190px;
    }
 }

/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
    button{
        width: 200px;
    }

}

只需在 css 上添加媒体查询，然后将要自定义的元素或类名称添加到每个媒体查询中。

如何使用媒体查询使表单响应所有设备

How do I use media query to make form responsive for all devices

html

javascript

css

media-queries

responsive