스마트 폰용 맞춤 CSS 버전

m_index.aspx라는 웹 페이지가 있습니다. 태블릿이나 스마트 폰에서 내 페이지가 열리면 시스템이 m_index.aspx 페이지로 리디렉션합니다.스마트 폰용 맞춤 CSS 버전

그래서이 페이지에서 로그인 양식을 작성합니다. 이 코드는 다음과 같습니다.

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

그래서이 코드와 함께, 나는 페이지의 accettable 버전을하지만 난 landscap 또는 fortrait에서 화면을 이동하려고하면 나는 어떤 결과가 없습니다. 화면이 가로 또는 세로 인 경우 다른 옵션을 설정하고 싶습니다. 우리가 도와 줄 수 있습니까?

출처

2016-10-19 bircastri

CSS에서 미디어 쿼리를 사용하여 가로 및 세로를 다르게 표시합니다.

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

출처

2016-10-19 15:00:13

감사합니다. – bircastri

스마트 폰용 맞춤 CSS 버전

답변

관련 문제