Question

我已经完成了1024x768分辨率的网站编码，现在想在我的代码中添加@media查询，以便当屏幕宽度为980px时侧边栏消失，然后从那里一直保持这样的状态。我自己尝试添加@media max-width 980，但似乎根本没有工作。我也尝试过在页面上的各个地方，但是再一次，没有运气。太令人沮丧了！代码如下（对不起，如果真的很长，我会把它全部留在那里，以避免任何有关代码的问题）。

HTML：

<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" />
    <title>Lakeside Books</title>
    <link rel="stylesheet" type="text/css" href="masterstyle.css">
    <meta name="viewsize" content="width-device-width,initial-scale=1.0">

    <!--[if IE]>
    <script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>

<body>
<div id="wrapper">
    <div id="sidebar">
        <nav id="nav">
            <h3 id="welcometext">Welcome To<br>Lakeside Books</h3>
            <div id="searchbar">
                <form action="http://www.example.com/search.php">
                    <input type="text" name="search" placeholder=" ...Search Book Title" class="searchstyle"/>
                </form>
            </div>
            <ul>
                <li style="background-color: #333">
                    <a href="1Index.html" class="link">
                        <span style="color: #ed786a">Home</span>
                    </a>
                </li>
                <li>
                    <a href="2Catgeories.html" class="link">
                        Categories
                    </a>
                </li>
                <li>
                    <a href="http://example.com" class="link">
                        Bestsellers
                    </a>
                </li>
                <li>
                    <a href="http://example.com" class="link">
                        Find Us
                    </a>
                </li>
                <li>
                    <a href="http://example.com" class="link">
                        Contact
                    </a>
                </li>
            </ul>
        </nav>
    </div>

CSS：

html, body { /* ### */
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}
body {
    background-color: #fdfdfd;
    font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI";
}
#wrapper {
    width: 100%;
    height: 100%;
    margin:0 0 0 20%; /* ### */
}
#sidebar {
    background-color: #212528;
    position: fixed;
    width: 20%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
}
#nav {
    color: #DADADA;
    display: block;
    max-width: 100%;
}
#nav ul {
    padding-left: 0;
}
#nav li {
    list-style-type: none;
    margin: 0;
    padding: 0.75em 0 0.75em 0;
    text-align: center;
    max-width: 100%;
}
#nav li:hover {
    background:#333;
}
#nav li a {
    display: block;
    padding: 0.5em 0;
}
.link {
    text-align: right;
    margin-right: 25%;
    letter-spacing: 1px;
    display: block;
}
#nav li a:link{
    color: #DADADA;
    text-decoration: none;
}
#nav li a:visited{
    color: #DADADA;
    text-decoration: none;
}
#nav li a:hover{
    color: #DADADA;
    text-decoration: none;
}
#nav li a:active{
    color: #DADADA;
    text-decoration: none;
}
#welcometext {
    text-align: center;
    /*font-style: italic;*/
    text-transform: uppercase;
    font-size: 1em;
    margin-top: 2em;
}
#searchbar {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    padding: 1em 1em 0.5em 1em;
    text-align: right;
}
#searchbar .searchstyle{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#searchbar input {
    max-width: 95%;
}

/*-------Media Styles-------*/

@media all and (max-width: 980px){
    #sidebar{
        float: none;
    }
}

如何在CSS中做出响应性的Sidemenu

0 个答案: