Question

我有一个名为m_index.aspx的网页。因此，当平板电脑或智能手机打开我的页面时，系统会将其重定向到m_index.aspx页面。

因此，在此页面中，我构建了一个登录表单。这是它的代码：

<html xmlns="http://www.w3.org/1999/xhtml" lang="it"><head id="Head1">
    <!-- PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" -->
    <title>
    Omnia Place
</title>    
    <script language="javascript" type="text/javascript">

       var _cookieManager = new CookieManager();
       var _keyControlledControls = new KeyboardControlledControls();

       var _guiID = "0";
       var _companyName = "";
       var _applicationName = "";
       var _footerContent = "";
       var _userName = "";

       _global_CurrentComponent = ComponentsTypes.Mobile;


    </script>
</head>
<body class="mobile-IndexBody">
    <form name="frmIndex" method="post" action="./m_Index.aspx" id="frmIndex" style="height:100%;" autocomplete="off">
<div>
</div>

    <div id="layoutFill" class="skin-BodyMain">
    </div>
    <div id="mainFill" class="mobile-mainDiv-login">
        <div id="dvHeader" style="text-align: center;" class="mobile-skin-LogIn-SfondoLogo">
            <div id="LogoLogin" class="skin-LogIn-CompanyLogo"></div>
            <div id="PayoffLogin" class="skin-LogIn-CompanyMission"></div>
        </div>
        <div id="dvData" class="mobile-login">
            <div id="dvFormContainer" class="mobile-skin-LogIn-FormContainer">
                <div id="dvOmniaLogo" class="mobile-skin-LogIn-ProgramLogo"></div>
                <div id="dvNomeAziendaProgramma" class="mobile-skin-LogIn-NomeAziendaProgramma">Name</div>
                <div id="dvInputs" class="mobile-skin-LogIn-Labels">
            <div id="dvBoxes" style="text-align: center;" class="mobile-div-text">
                <div class="mobile-box-login">
                    <label class="mobile-skin-LogIn-Labels">User Name</label>
                    <input id="login_userName" name="login_userName" class="mobile-skin-LogIn-input" value="" type="textbox">

                    <label style="margin-top:5px;" class="mobile-skin-LogIn-Labels">Password</label>
                    <input id="login_password" name="login_password" class="mobile-skin-LogIn-input ReturnTriggerer" type="password">
                </div>
            </div>
            <div id="dvButton" style="text-align: center;" class="mobile-div-button">
                <div class="mobile-skin-button-login">
                    <label id="btnLogin" class="mobile-skin-LogIn-Buttons">Accedi</label>
                </div>
            </div>
                </div>
            </div>     
        </div>
        <div id="dvFooter" class="mobile-skin-LogIn-Footer">

        </div>
    </div>
    <div id="loadingDiv" class="Loading" style="width: 0px; height: 0px;">
    </div>

</body></html>

这是我的移动版本的Login.css文件。

.mobile-skin-mainDiv-login {
    height: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;

}

.mobile-skin-login{
    height: 75%;
    width: 100%;
    text-align: center;
    float: left;
}

.mobile-skin-LogIn-SfondoLogo
{
    background: url(./Images/LogInSfondoLogoOmnia.png) no-repeat center center;
    text-align: center;
    float: left;
    height: 15%;
    width: 100%;
}

.mobile-skin-LogIn-Footer
{
    background: url(./Images/LogInLogoIntestazioneBassa.png) no-repeat center center;
    text-align: center;
    float: left;
    height: 15%;
    width: 100%;
}

.mobile-skin-LogIn-FormContainer{
    margin: 0 auto;
    width:85%;
    height:100%;
    /*background:url(./Images/FormContainerLogin.png) no-repeat center center;*/
    border: 1px solid;
    border-radius: 25px;
    background-color:#dcdcdc;
}

.mobile-skin-LogIn-ProgramLogo{
    margin: 0 auto;
    width:70%;
    height:15%;
    background-image:url(./Images/OmniaLogoLogin.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #d2d2d2;
    border-bottom-left-radius: 2em;
    border-bottom-right-radius: 2em;
}

.mobile-skin-LogIn-NomeAziendaProgramma
{
    font-family: DIN;
    font-size: 3.0vw;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    color: #575f62;
    height: 10%;
}



.mobile-skin-div-text{
    height:70%;
}

.mobile-skin-div-button{
    height:25%;
}

.mobile-skin-LogIn-Labels
{
    font-family: DIN;
    font-size: 3.0vw;
    text-align: center;
    color: #575f62;
    height: 75%;
    margin:0 auto;
}

.mobile-skin-LogIn-input
{
    font-family: DIN;
    font-size: 2.5vw;
    width: 95%;
    height:20%;
    display: block;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 3px;
    padding-bottom: 3px;
    border: 0px;
    border-radius: 10px;
    margin-bottom: 5px;
}

.mobile-skin-text{
    height:30%;
}

.mobile-skin-box-login{
    width:95%;
    height:100%;
    text-align:left;
    margin:0 auto;
}

.mobile-skin-IndexBody{
    height:100%;
}

.mobile-skin-LogIn-Buttons
{
    font-family: DIN;
    font-size: 3.5vw;
    color: #575f62;
}

.mobile-skin-button-login{
    text-align: center; 
    width:25%; 
    height: 25%;
    border:2px; 
    border-radius:10px;
    background-color: #d2d2d2;
    margin: 0 auto;
}

所以使用这个代码，我有一个可以接受的页面版本，但是如果我试图在景观或两个地方移动屏幕，我就不会有一些结果。如果屏幕是横向或纵向，我想设置不同的选项。我们可以帮助我吗？

Answer 1

在CSS中使用媒体查询以不同方式显示格局和肖像。

@media all and (orientation: portait) {
    /* portait css here */
}
@media all and (orientation: landscape) {
    /*  landscape css here */
}

智能手机版的自定义css

1 个答案: