自定义css智能手机版本

Custom css for smartphone version

本文关键字：版本 智能手机 css 自定义      更新时间：2023-09-26

我有一个名为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;
}

所以有了这段代码，我有一个可接受的版本的页面，但如果我试图在横向或横向移动屏幕，我没有一些结果。如果屏幕是横向或纵向，我想设置一个不同的选项。我们能帮我吗?

在你的CSS中使用媒体查询来显示不同的横向和纵向。

@media all and (orientation: portait) {
    /* portait css here */
}
@media all and (orientation: landscape) {
    /*  landscape css here */
}
相关文章：