个人中心
gpt4 book ai didi

php - 媒体查询与网站 CSS 混淆

转载 作者：太空宇宙 更新时间：2023-11-04 07:46:12 26 4
gpt4 key购买 nike

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

添加媒体查询后的样子

最佳答案

您的媒体查询太具体了，您需要满足于 3 个，也许 4 个，并使它们都正常工作。我只会在移动纵向模式下使用最大高度，除此之外没有必要，它只会导致您在不同的屏幕上出现问题。拥有 3 种看起来像您想要的基本尺寸(sm、md、lg)比拥有 7 种有缺陷的尺寸要好。

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

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

如果你在 fiddle 上分享它会很理想。

关于php - 媒体查询与网站 CSS 混淆，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48121543/

26 4 0
文章推荐： html - 一个页面上的多个仅 HTML/CSS slider 不会独立更改
文章推荐： c - 为什么使用此代码中的 "LD_QUEUE_AVAILABLE"状态
文章推荐： c++ - Xlib的Colormap在哪里定义的？
文章推荐： python - 如何在文件中查找子字符串？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com