html页面布局没有响应_Html_Css

html页面布局没有响应

html css

html页面布局没有响应,html,css,Html,Css,我试图创建一个页面来响应不同的浏览器分辨率，我注意到我必须使用媒体查询，但它对我不起作用。我将css编码为显示正常，宽度像素>900，并且当它在下面时看起来像一个电话网页，但当我降低分辨率时它不会做出反应 <!DOCTYPE html> <html> <head> <title>testing 2</title> <link type="text/css" rel="stylesheet" href="main.c

我试图创建一个页面来响应不同的浏览器分辨率，我注意到我必须使用媒体查询，但它对我不起作用。我将css编码为显示正常，宽度像素>900，并且当它在下面时看起来像一个电话网页，但当我降低分辨率时它不会做出反应

<!DOCTYPE html>
<html>
<head>
    <title>testing 2</title>
    <link type="text/css" rel="stylesheet" href="main.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="body">
    <div id ="container">
        <header class="mainHeader">
            <content>
                <p>Page Title, Name,....
                </p>
            </content>
        </header>
        <nav class="leftNav">
            <ul>
            <li><a href="">Home</a></li>
            <li><a href="">body</a></li>
            <li><a href="">education</a></li>
            <li><a href="">project</a></li>
            <li><a href="">education</a></li>
            </ul>
        </nav>
        <div class="mainArticle">
            <article>
                <header>
                    <h2>This is the Main Title</h2>
                </header>
                <content>
                    <p>This is a standalone complete HTML5 and CSS3 
                </p>
            </content>
        </article>
    </div>
    <aside class="sideBar">
        <article>
            <h2>title for side</h2>
            <p> side bar contetnta asd asdasda </p>
        </article>
    </aside>
    <footer class="mainFooter">
        <p>Copyright &copy; </p>
    </footer>
</div>
</body>

样式表是按从上到下的顺序计算的。如果使用不同属性在相同id上编写css，则将在屏幕上评估

#媒体中的#容器
块
#container{
    background: red;
}

#container{
    background: black;
}

它将是第二个
#container{
    background: black;
}

你又有什么问题？试着解释清楚一点？
#container{
    background: black;
}