Question

正在使用jquery移动库开发应用程序，但我需要为桌面浏览器和移动浏览器应用不同的样式，因为我想在两个平台上实现相同的外观，而不是为它们创建不同的网站。 / p>

这是我为桌面浏览器编写的代码。

<div data-role="page" id="chat">
<div data-role="header"><h1>Welcome to the Streamline Chat App</h1></div>
<div data-role="main" class="ui-content" style="margin:500px">
<form>
 <label for="username" >Username:</label>
 <input type="text" id="username">
 <label for="pwd" >Password:</label>
 <input type="password" id="pwd">
 <input type="submit" data-inline="true" value="Submit">
</form>

当用户使用桌面浏览器时，主div标签的边距应为500px。如果他们使用移动设备，则不应使用保证金。无论如何这可以实现吗？

Answer 1

尝试阅读并使用media queries。

您的代码应该是：

.main {
  margin-left: 500px;
}

/* For mobile screens */
@media screen and (max-width: 480px) {
    .main {
       margin-left: 0;
    }
}

Answer 2

使用媒体查询使其在任何屏幕尺寸中都具有响应性。这是链接https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 3

您可以使用媒体查询。更多信息可以在https://www.w3schools.com/cssref/css3_pr_mediaquery.asp找到。我希望这是一个评论，但我需要50个代表，所以我会这样做。

Answer 4

尝试这样的事情：

<body>
    <div id="block" style="width:100px;height:100px">
    </div>


    <script>
    function changeStyle(){
        if(window.innerWidth<900){
            document.getElementById("style").setAttribute("href","mobile.css");

       }else if((window.innerWidth)>900 &&(window.innerWidth)<1200){
         document.getElementById("style").setAttribute("href","medium.css");   
       }
        else 
              document.getElementById("style").setAttribute("href","large.css"); 
    }  
    window.onresize=changeStyle;
   changeStyle();
 </script>
</body>
</html>

Answer 5

您应该使用检查视口属性的CSS @meda规则（媒体查询），并根据所需的视口大小编写CSS样式。请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

例如：

<style>
.my_element {
    width: 900px
  }
/*from screen sizes 0px to 600px*/
@media (max-width: 600px) {
  .my_element {
    width: 600px
  }
}
</style>

如何根据浏览器屏幕大小动态更改div的CSS样式

5 个答案: