媒体查询与网站 css 混淆答案

【问题标题】：Media queries messes with website css媒体查询与网站 css 混淆
【发布时间】：2018-01-06 06:30:54
【问题描述】：

在我的网站上，我添加了媒体查询以使其能够响应智能手机/平板电脑，并且在我测试它时它可以完美运行。突然，当我第二天回来时，我网站上的所有 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%;
}

}

我使用最小高度/宽度，因为当您水平翻转屏幕时，某些查询具有相同的宽度，因此我必须指定。所以我的问题是，当我编辑手机/平板电脑的媒体查询时，它现在和稍后当我回来时，网站本身（不是在手机上）看起来都一团糟。如果有人可以向我展示使您的网站在手机上响应的最佳方式，那就太好了。这是我的网站代码

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);
}

添加媒体查询后的样子

【问题讨论】：

上传你想要的和你拥有的截图可能会有所帮助。
一般建议：您试图对媒体查询过于具体。从您的媒体查询中删除 min-height 并使用 min-width。
我使用最小高度，因为当你水平翻转它时，一些查询具有相同的宽度
听@Jeffwa 而不是说你为什么这样做。您奇怪的布局结果来自您尝试非常严格地定义参数。您对浏览器窗口和设备大小做出了错误的假设。一个非常好的解决方案是仅使用宽度，并确保样式允许所有内容根据宽度很好地适合。然后它在任何设备上总是看起来不错。
在您的媒体查询中使用一个最小值和最大值（而不是两个最小值）。这是一个重要的开始！

标签： php html css media-queries

【解决方案1】：

您的媒体查询过于具体，您需要接受 3 个，也许是 4 个，并让它们都正常工作。我只会在移动纵向模式上使用 max-height ，除此之外没有必要，它只会在不同的屏幕上导致您出现问题。拥有 3 种符合您需要的基本尺寸（sm、md、lg）总比拥有 7 种有缺陷的尺寸要好。

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

此外，在对象放置（顶部、底部等）等方面使用如此多的百分比会导致您在不同设备上不断出现问题，在 px 中建立它并从那里开始工作会更容易。对于宽度，可以使用 %，但请注意不要将它们与 vw 混合，因为同样会造成麻烦。

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

【讨论】：

哦，我喜欢你的观点！所以我只在宽度和高度时使用 % ？并为喜欢定位它最好使用像素？
是的，确切地说，我发现这样做更容易。或者甚至尝试只保留宽度的 %，以便更容易保持响应。