如何在CSS中对所有移动的设备的输入字段进行相同的对齐

jgovgodb  于 2023-01-14  发布在  其他
关注(0)|答案(1)|浏览(128)

我正在登录页面。对于桌面和笔记本电脑设备，它看起来都很好。在移动设备，它看起来有点不同，在不同的移动设备。例如，在iPhone 12 Pro的设计看起来不错，但在iPhone XR它看起来不好，例如，输入字段移到左边，输入字段比屏幕尺寸小。我有以下css和html代码：

.logo {
    background: url('../images/logo_readpeak.png') no-repeat;
    height: 109px;
    width: 247px;
    margin-bottom: 20px;
}
.bg {
        background: linear-gradient(270deg, #00000000 60%, #000000ad 100%),
        linear-gradient(90deg, #00000000 60%, #000000ad 100%),
        url('../images/background_photo.jpeg') transparent 0% 0% no-repeat padding-box;
    width: 100%;
    min-height: 100vh;
    background-position: center;
    background-size: cover;
    opacity: 1;
}
@media only screen and (min-width: 992px) {
    .form-container {
        margin-left: 33%;
        margin-top: 23%;
    }
    .news-container {
        margin-left: 14%;
        margin-top: 23%;
        max-width: 35em;
    }
    .input-width {
        width: 350px;
    }
    .desktop-forget-password {
        display: block !important;
    }
}
@media only screen and (max-width: 990px) {
    .mt-40 {
        margin-top: 40px;
    }
    .mobile-forget-password {
        display: block !important;
    }
    .input-container {
        display: -ms-flexbox;
        display: flex;
        width: 100px;
    }
    .news-container {
        margin-bottom: 30px;
    }

    .input-width {
        width: 320px;
    }
}

@media only screen and (max-width: 400px) {
    .input-width {
        width: 270px;
    }

    .new-login-form {
        margin: 25px;
    }
}

@media only screen and (min-width: 1800px) {
    .mt-40 {
        margin-top: 30%;
    }

    .form-container {
        margin-left: 32%;
    }

    .news-container {
        width: 570px;
        margin-left: 183px;
    }

    .input-width {
        width: 450px;
    }
}

.form-label {
    font: normal normal 20px/30px Raleway;
    letter-spacing: 0px;
    color: #ffffff;
    opacity: 1;
}
.login-btn {
    text-align: left;
    font: normal normal medium 20px/24px Raleway;
    letter-spacing: 0px;
    color: #ffffff;
    background-color: #599da6;
    padding: 5px 20px 5px 20px;
    border: none;
    margin-top: 20px;
}
.login-btn:hover {
    background-color: #599da6;
    border: 1px solid white;
}
.ml-5 {
    margin-left: 5px;
}
.input-container {
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    min-width: 100%;
    margin-bottom: 15px;
}

.no-border {
    border: none;
    outline: none;
    border-radius: 0px;
}
.news-container {
    background: #599da6 0% 0% no-repeat padding-box;
    border-radius: 15px;
    padding: 15px;
}
.news-heading {
    font: normal normal bold 26px/35px Raleway;
    letter-spacing: 0px;
    color: #ffffff;
}
.news-tile-container {
    padding: 15px 0px 15px 0px;
    border-bottom: 1px solid white;
}
.news-title {
    text-align: left;
    font: normal normal normal 17px/24px Raleway;
    letter-spacing: 0px;
    color: #ffffff;
}
.news-link {
    text-decoration: none;
    font: normal normal normal 17px/24px Raleway;
    letter-spacing: 0px;
    color: #ffffff;
}
.forgot-password-container {
    position: absolute;
    bottom: 45px;
    left: 45px;
}

.icon {
    padding: 10px;
    background: white;
    color: gray;
    min-width: 35px;
    text-align: center;
}

.forget-password-h {
    font: normal normal bold 22px/24px Raleway;
    letter-spacing: 0px;
    color: #589da6;
}

.forget-password-p {
    color: white;
    text-align: left;
    font: normal normal normal 18px/24px Raleway;
    letter-spacing: 0px;
    margin-top: 20px;
}

.forget-password-l {
    color: #589da6;
    text-decoration: none;
    font: normal normal bold 20px/24px Raleway;
}
.desktop-forget-password {
    display: none;
}

.mobile-forget-password {
    display: none;
    margin-top: 45px;
    margin-left: 25px;
    margin-right: 25px;
}

@media all and (max-height: 600px) {
    .bg {
        min-height: 100%;
    }
}
<!DOCTYPE html>
<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">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@700&family=Raleway:ital,wght@0,300;0,800;1,200&family=Ubuntu:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/css/newlogin.css">
    <title>Login Page</title>
    <style>
        
    </style>
</head>
<body class="bg">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-12 col-size">
                <!-- FORM START HERE -->
                <?php echo $this->Form->create('User', array(
                        'url' => array('controller' => 'users', 'action' => 'newlogin'), 'method' => 'POST', 'class' => 'new-login-form form-container mt-40',
                        'id' => 'new-login-form'
                )); ?>
                    <div class="logo"></div>
                    <?php if (isset($error) && $error == "wrong,"): ?>
                        <div class="alert alert-danger <?php if (empty($error)): ?>display-hide<?php endif; ?>">
                            <button class="close" data-close="alert"></button>
                            <span>Incorrect username or password. Please use your email address as the username</span>
                        </div>
                    <?php endif; ?>
                    <div class="form-group input-thing">
                      <label for="exampleInputEmail1" class="form-label">Work Email Address</label>
                      <div class="input-container">
                        <i class="fa fa-user icon"></i>
                        <?php echo $this->Form->input('username', array('label' => '', 'class'=>"form-control input-width no-border input-new-login pull-left", 'type' => 'text', 'placeholder' => 'E-Mail Address')); ?>
                        <!--<input type="email" class="form-control input-width no-border" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">-->
                      </div>
                    </div>
                    <div class="form-group input-thing">
                      <label for="exampleInputPassword1" class="form-label">Password</label>
                      <div class="input-container">
                        <i class="fa fa-lock icon" aria-hidden="true"></i>
                        <?php echo $this->Form->input('password', array('label' => '', 'class'=>"form-control input-width no-border input-new-login pull-left", 'type' => 'text', 'type' => 'password', 'placeholder' => 'Password')); ?>
                        <!--<input type="password" class="form-control input-width no-border" id="exampleInputPassword1" placeholder="Password">-->
                      </div>
                      
                    </div>
                    <button type="submit" class="btn btn-primary login-btn">LOGIN <span class="ml-5"><i class="fa fa-sign-in" aria-hidden="true"></i></span></button>
                <?php echo $this->Form->end(); ?>
                
                <!-- FORM END HERE -->
                <div class="mobile-forget-password">
                    <p href="/users/passwordRecovery" class="forget-password-h">Forgot Password?</p>
                    <div>
                        <p class="forget-password-p">Don’t have a Readpeak account yet?</p>
                        <a href="/signup" class="forget-password-l">Create one here</a>
                    </div>
                </div>
            </div>
            <!-- <div class="col-md-2 col-sm-2 col-xs-12"></div> -->
            <div class="col-md-6 col-sm-6 col-xs-12 col-size">
                <div class="news-container mt-40">
                    <iframe src="https://app.readpeak.com/ads/get/?l=579f889b0cd477a5" id="mcn_iframe_579f889b0cd477a5-1" style="width: 100%; max-width: 600px; height: 400px; border: none;" frameborder="0" scrolling="no"></iframe> 
                </div>
            </div>
        </div>
        <div class="forgot-password-container desktop-forget-password">
            <a href="/users/passwordRecovery" class="forget-password-h">Forgot Password?</a>
            <div>
                <p class="forget-password-p">Don’t have a Readpeak account yet?</p>
                <a href="/signup" class="forget-password-l">Create one here</a>
            </div>
        </div>
    </div>
</body>
</html>

对于iPhone 12 Pro，它看起来是这样的，这是好的。输入字段，忘记密码，新闻和更新是在同一对齐。
对于iPhone XR，它看起来像下面的图像，这是不对的。输入字段，忘记密码，新闻和更新文本不在同一对齐。
有谁能告诉我如何修复它，使它在所有移动设备上看起来像相同的设计，在iPhone 12 Pro上看起来像什么？我在这个问题上卡住了很长时间。请帮助我。

css

1条答案

按热度按时间
gdx19jrr

gdx19jrr1#

“忘记密码”区域有左页边距和右页边距：

.mobile-forget-password {
    display: none;
    margin-top: 45px;
    margin-left: 25px;
    margin-right: 25px;
}

从.mobile-forget-password CSS类中删除这些边距，或者向其他要对齐的元素添加相同的左/右边距。

赞(0）分享  回复(0）举报  2023-01-14
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com