Question

在我的网站上，我添加了媒体查询，以便对智能手机/平板电脑做出响应，并且在我测试时它可以正常运行。突然第二天我回来时，我网站上的所有CSS都搞砸了，修复它的唯一方法是删除网站上的媒体查询。我相信问题是当我指定网站的宽度和高度时。这是媒体查询代码

媒体查询代码：

@media (min-height: 1366px) and (min-width: 1024px) {

    #img-div{

    width: 15%;
    height: 20%;
    margin: 0 auto;
    overflow: hidden;

}

    #container{

    width: 100vw;
    height: 100%;
    margin: 0 auto;
    position: relative;
    top: 20%;


}

    #login-div{
    width: 39vw;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
}

    .input-box{
    width: 100%;
     height: 60px;
    background-color: rgba(255, 255, 255, 0.25);
  border:  none;
  padding: 5px 20px;
    border-style: none;
    margin: 0 auto;
 font-size: 16px;
  box-sizing:border-box;

}

    #welcome-text{
    text-align: center;
    font-size: 25px;
}
}

@media (min-height: 1024px) and (min-width: 768px){


    #container{

     width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
    top: 0%;


}

     #login-div{
    width: 39vw;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
         position: relative;
         top: 20%;
}

     #welcome-text{
    text-align: center;
    font-size: 20px;
         position: relative;
         top: 20%;
}

     #img-div{

    width: 15%;
    height: 10%;
    margin: 0 auto;
    overflow: hidden;
        position: relative;
         top: 20%;
}
}

@media (min-height: 812px) and (min-width: 375px){

     #img-div{

    width: 15%;
    height: 10%;
    margin: 0 auto;
    overflow: hidden;
        position: relative;
         top: 12%;
}

    #welcome-text{
    text-align: center;
    font-size: 16px;
     position: relative;
     top: 12%;
}
    #login-div{

    width: 78vw;
    height: 100%;
    margin: 0 auto;
    position: relative;
    top: 12%;
}

    #forgotPass{

    position: relative;
    left: 15%;
}

    #remember{

    margin: 0;
    padding-left: 12%;
    padding-top: 1%;
}

}

@media (min-height: 375px) and (min-width: 812px){

     #img-div{

    width: 6%;
    height: 10%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
     top: 5%;
    background-color: ;
}

     #welcome-text{
    text-align: center;
    font-size: 18px;
     position: relative;
     top: 1%;
}

    #login-div{

    width: 39vw;
    height: 100%;
    margin: 0 auto;
    position: relative;
    top: 0%;
}
    .bottom-text{

    float: left;
    position: relative;
    bottom: 5%;
}

}

我使用min-height / width，因为当你水平翻转屏幕时，一些查询具有相同的宽度，所以我必须指定。所以我的问题是，当我编辑手机/平板电脑的媒体查询时，它现在可以工作，之后当我回来时，网站本身（不在手机上）看起来都搞砸了。如果有人可以向我展示让您的网站在手机上做出响应的最佳方式，那就太棒了。这是我的网站代码

Html和一些php

<?php

if($_SERVER['REQUEST_METHOD'] =="POST"){

    $error = "";
    $fullname = addslashes(trim($_POST['fullname-text']));
    $email = addslashes(trim($_POST['email-text']));
    $password = addslashes(trim($_POST['password-text']));
    $storePassword = password_hash($password, PASSWORD_BCRYPT, array('cost' => 10));

    if(!empty($fullname) && !empty($email) && !empty($password)){

        //Check if email is valid
        if(filter_var($email, FILTER_VALIDATE_EMAIL) == false){

            $error .= "Email not VALID";
        }

        //Check if passwrod is greater 6
        if(strlen($password) < 6){

            die ("Password has to be GREATER than 6 characters!");

        }


    }
}

?>


<!DOCTYPE HTML>
<html>

    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rotary Speaker Login Page</title>
    <link rel="stylesheet" type="text/css" href="rotarycss.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

    </head>

    <body>

      <div id="tint">

          <div id="container">

              <div id="img-div">
              <img src="yellow.png" id="logo">
              </div>

              <p id="welcome-text">Welcome to the Guest Speaker Forum</p>

              <div id="login-div">


              <form action="signup.php" method="post">

                    <input type="text" name="fullname-text" placeholder="Fullname" class="input-box" class="test">

                  <br><br/>
                    <input type="text" name="email-text" placeholder="Email" class="input-box">

                  <br><br/>
                <input type="password" name="password-text" placeholder="Password" class="input-box">

                  <br><br/>


            <button class="submit" name="submit">SIGN UP</button>  
          <br><br/>

        <a href="login.php" class="href-links"><p class="bottom-text">Already have an account?</p></a>

        <br><br/>

        <a href="http://www.google.com" class="href-links"><p id="goBack" class="bottom-text">&larr; Back to Website</p></a>


          </form>




              </div>



          </div>



        </div>

    </body>

</html>

CSS

html {
    background-image: url(speaker.png);
    background-attachment: fixed;
    background-size: 100% 100%;
}
html, body {
 min-height: 100%;
 min-width: 100%;
color: hsla(0,0%,100%,.8);
font-family: 'Montserrat', sans-serif;
overflow: hidden;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-o-user-select: none;
user-select: none;
margin: 0;
    padding: 0;
}

#tint{

z-index: 1;
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.5);   

}

#container{

    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
    top: 0%;
   background-color: ;

}


#img-div{

    width: 8%;
    height: 15%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    top: 12%;
}

#logo{

    width: 100%;
    height: 100%;

}

#welcome-text{
    text-align: center;
    font-size: 23px;
    position: relative;
    top: 12%;
}

#login-div{

    width: 29vw;
    height: 100%;
    margin: 0 auto;
    position: relative;
    top: 12%;
    background-color: ;
}


.input-box{
    width: 100%;
     height: 40px;
    background-color: rgba(255, 255, 255, 0.25);
  border:  none;
  padding: 5px 20px;
    border-style: none;
    margin: 0 auto;
 font-size: 20px;
  box-sizing:border-box;
    color:white;
}

input::-webkit-input-placeholder {
color: white !important;

}

.checkBox{

    width: 25px;
    position: relative;
    float:left;

}

.checkBox label{

    cursor: pointer;
    position: absolute;
    width: 25px;
    height: 25px;
    top:0px;
    left: 0px;
    background: #eee;
    border: 1px solid #ddd;

}

.checkBox label:after{

    opacity: 0.2;
    content: '';
    position: absolute;
    width: 9px;
    height: 5px;
    background: transparent;
    top: 6px;
    left: 7px;
    border: 3px solid #333;
    border-top: none;
    border-right: none;
    transform: rotate(-45deg);
}

.checkBox label:hover:after{

    opacity: 0.5;
}

.checkBox input[type=checkbox]:checked + label:after{

    opacity: 1;
}

#remember{

    margin: 0;
    padding-left: 7%;
    padding-top: 1%;
}

.submit{

    background-color: orange;
  border: none;
  padding: 10px 27px;
  width: 100%;
    height: 50px;
    color: hsla(0,0%,100%,.8);
    font-size: 20px;
}

.bottom-text{

    float: left;

}

.bottom-text:hover{

    text-decoration: underline;
}
#forgotPass{

    position: relative;
    left: 55%;
}

#goBack{

    clear: both;
}

.href-links{

    color: hsla(0,0%,100%,.8);
}

添加媒体查询时的外观

Answer 1

您的媒体查询过于具体，您需要满足3，也许4，并让它们全部正常工作。我只会在移动肖像模式下使用max-height，除了没有必要，它只会导致你在不同的屏幕上出现问题。有3个基本尺寸（sm，md，lg）看起来比你想要的要好7个错误。

你必须重新检查你的@media尺寸，它们看起来有点奇怪：你的高度都比你的宽度大，只有手机或平板电脑才需要。

此外，如果对象放置（顶部，底部等）使用这么多百分比会导致您经常遇到不同设备的问题，那么在px中建立它并从那里开始工作会更容易。对于宽度，可以使用％，但要注意不要将它们与vw混合，因为这样会再次造成麻烦。

如果你在小提琴上分享它将是理想的。

媒体用网站css查询混乱

1 个答案: