Question

我有一个登录主页的以下代码段。我希望它能够做出回应。如何使用jQuery mobile使其响应？ jqm是否为它提供任何默认的CSS？

    <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<link rel="stylesheet" href="./css/custom.css">
</head>
<body>

<div data-role="page" id="pageone">

    <div data-role="content">
        <img src="./imgs/abc.jpg">
        <div class="ui-grid-a">
            <div class="ui-block-a"><img src="./imgs/home.jpg">
            </div>

            <div class="ui-block-b">
                <form id="HLogin" method="POST">
                    <div data-role="fieldcontain">
                        <label for="url">Username:*</label>
                        <input class="required" id="Lusername" name="uid_r" type="text" value="">          
                    </div>
                    <div data-role="fieldcontain">
                        <label for="url">Password:*</label>
                        <input id="Lpassword" name="pwd_r" type="password" value="">          
                    </div>              
                <button data-theme="b" type="submit">Login</button>       
                </form>
            </div>
        </div>
    </div>

</div> 
</body>
</html>  

custom.css:  

    .ui-block-a {
    width:70% !important;
}
.ui-block-b {
    width:30% !important;
}

Answer 1

在这里，您可以根据屏幕添加css并添加所需的最小宽度。

 @media screen and (min-width: 320px) {
   .ui-block-a {
      width:0% !important;
   }
   .ui-block-b {
      width:100% !important;
  }

}

@media screen and (min-width: 620px) {
   .ui-block-a {
     width:70% !important;
   }
   .ui-block-b {
      width:30% !important;
   }

}

如何使jquery移动页面响应？

1 个答案: