Question

我需要一些CSS样式表的帮助请看这个网站： http://m.facebook.com

当我在手机浏览器中打开它时，它会在整个屏幕上传播。左到右。这就是我在CSS中想要它的方式。当我在计算机浏览器中打开它时，它将自己置于中间位置。像600px宽的东西。我也想在CSS中使用它。这种情况发生在IE，Firefox，Chrome等所有浏览器中。

我该怎么做？

我的CSS是这样的：它适用于计算机浏览器，但不会在手机浏览器的屏幕上传播...... 手机浏览器也将它显示为一个小的中心内容，两边都有很多空白屏幕......

<html><head>
<style type="text/css">
body{ margin: 0px; padding: 0px; }
#page{ width: 600px; }
</style>
</head><body><center>
<div id="page">

All other content goes here

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

Answer 1

最好使用内部样式，它应该类似于下面的代码

@media only screen and (max-device-width: 480px) {
    div#wrapper {
        width: 400px;
    }

    div#header {
        background-image: url(media-queries-phone.jpg);
        height: 93px;
        position: relative;
    }

    div#header h1 {
        font-size: 140%;
    }

    #content {
        float: none;
        width: 100%;
    }

    #navigation {
        float:none;
        width: auto;
    }
}

Answer 2

尝试将其放在头部：

<meta name="viewport" content="width=device-width, initial-scale=1">

如果你想在PC浏览器上居中，你需要这个css代码：

#page { width:100%;}
@media (min-width:768px) {
    #page { 
        width:600px;
        margin-left:auto;
        margin-right:auto;
        }
}

用于手机和电脑浏览器的CSS

2 个答案: