如何使用媒體查詢使表單回應所有設備-有解無憂

我使用 HTML 和 CSS 創建了一個簡單的表單，但是當我嘗試通過調整寬度在瀏覽器上檢查它時，一切都變得不合適，即我希望網站的回應能力能夠巧妙地將組件縮放到更小的螢屏尺寸。

抱歉，我目前還沒有機會在問題中發布圖片

所以這是我不同寬度的表格：

initial @1903px （如預期）

adjusted @1619px（如預期）

adjusted @1164px（不如預期ie distribute，應buy與sell邊距保持一定距離fullname）

adjusted @1103px（不如預期ie distribute，應在一起）buy@ 784px（不如預期ie , and should be together) @483px (不是預期的 ie , and should be together, for fall out of place)sell

adjusted distributebuysell

adjusted distributebuyselldrop-down-arrowdistribution-route

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>

我的目標是使用媒體查詢使表單在所有螢屏上都具有回應性，請問如何使我的表單回應靈敏？希望有人可以提供幫助:)

uj5u.com熱心網友回復：

您的問題是如何使用媒體查詢，對嗎？
這真的很簡單。可以說我有寬度為 200 像素的按鈕。
我希望寬度按鈕在較小的設備中變小。

/* // 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 上添加媒體查詢，并將您想要自定義的元素或類名稱添加到每個媒體查詢中。

uj5u.com熱心網友回復：

您可以使用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，如果您需要更多說明，可以深入谷歌搜索。

此外，如果您需要知道您的視口大小：我的視口是什么。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/419792.html

標籤：

上一篇：如何在輸入元素中獲取圖示？

下一篇：Kubectl服務器和客戶端版本