Question

我在我的投资组合网站上工作，而且我是这一切的初学者。

我使用媒体查询来更改手机网站。当我将手机切换到风景时，它完全没有了。

基本上我在为不同的布局正确对齐我的徽标/联系人按钮时遇到了麻烦。另外，在我的手机上，页脚完全消失了！

以下是我上传的测试网站：example

我的CSS

    body {
    background-color:#0e0c0f;
    margin: 0;
    padding: 0;
}
#container{
    height: 865px;
    font-size: 0;
}
#logo{
    margin-top: 10px;
    position: fixed;
    width: 100%;
    height: 32px;   
}
.nav{
    float: right;
}
#portfolio{
    margin-top: 47px;
    height: 800px;
    white-space: nowrap;
    display: inline-block;
}
#footer{
    background-color:blue;
    position: fixed;
    width: 100%;
    height: 32px;
}
@media only screen and (max-device-width: 800px) {
#logo{
    margin-top: -50px;
    position: fixed;
    width: 100%;
    height: 20%;    
    background-color:#0e0c0f;
}
.logoimage{
    margin-top:15px;
    margin-left:15px;
}
.nav{
    float:right;
    margin-left:15px;
}
#portfolio{
    margin-top: 47px;
    white-space:normal;
    display:list-item;
}
.art{
    width:100%;
}
#footer{
    background-color:red;
    height: 32px;
}
}

我的HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="style2.css">

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript' src='jquery.mousewheel.js'></script>
    <script>
        $(function() {
           $("body").mousewheel(function(event, delta) {
              this.scrollLeft -= (delta * 90);
              event.preventDefault();
           });
        });
    </script>

</head>

<body>
<div id="container">
    <div id="logo">
        <img src="images/logo.png" class="logoimage">
        <img src="images/resume.png" class="nav">
        <img src="images/contact.png" class="nav">
    </div>
    <div id="portfolio">
            <img src="tester.png" class="art">
            <img src="tester.png" class="art">
            <img src="tester.png" class="art">
            <img src="tester.png" class="art">
            <img src="tester.png" class="art">
            <img src="tester.png" class="art">
            <img src="tester.png" class="art">
            <img src="tester.png" class="art">
    </div>
    <div id="footer">
        Help
    </div>
</div>
</body>

</html>

非常感谢任何帮助或提示。

Answer 1

在CSS媒体查询中，请尝试使用max-width代替max-device-width

更改布局时的CSS对齐方式

1 个答案: