CSS3媒体不工作_Css_Responsive Design

CSS3媒体不工作

css responsive-design

CSS3媒体不工作,css,responsive-design,Css,Responsive Design,我试图模仿这个页面上的例子。。。它应该做两件事后，调整到小 1.）使LI元素内联。。。。这对我有用 2.）使导航和剖面成为一列。。。这对我不起作用，见图这是代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vajcia</title> </head> <style> body {

我试图模仿这个页面上的例子。。。它应该做两件事后，调整到小
1.）使LI元素内联。。。。这对我有用
2.）使导航和剖面成为一列。。。这对我不起作用，见图
这是代码

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vajcia</title>
</head>
<style>
body
{
    margin: 0 0;
}
#container
{
    box-sizing:border-box;
    width: 100%;
    border: 5px solid green;
}
section
{
    border: 2px solid yellow;
    margin-left: 200px;
}
nav{

    background-color: red;
    width:200px;
    box-sizing:border-box;

    /*position: absolute;
    top:0;
    left:0px;*/
    float:left;
}
@media screen and (min-width:600px) {
    nav {
        float: left;
        width: 25%;
    }
    section {
        margin-left: 25%;
    }
}
@media screen and (max-width:599px) {
    nav li {
        display: inline;
    }
}

</style>
<body>
    <div id="container">
        <nav>
            <ul>
                <li>Home</li>
                <li>Taco</li>
                <li>Hours</li>
                <li>Contact</li>
                <li>About</li>
                <li>Hovno</li>
            </ul>
        </nav>      
        <section>
            The margin-left style for sections makes sure there is room for the nav. Otherwise the absolute and static elements would overlap
        </section>
        <section>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
        </section>
        <section>
            Notice what happens when you resize your browser. It works nicely!
        </section>
    </div>

    </body>
    </html>


瓦西亚
身体
{
利润率：0；
}
#容器
{
框大小：边框框；
宽度：100%；
边框：5px纯绿色；
}
部分
{
边框：2倍纯黄色；
左边距：200px；
}
导航{
背景色：红色；
宽度：200px；
框大小：边框框；
/*位置：绝对位置；
排名：0；
左：0px*/
浮动：左；
}
@媒体屏幕和屏幕（最小宽度：600px）{
导航{
浮动：左；
宽度：25%；
}
部分{
左边缘：25%；
}
}
@媒体屏幕和屏幕（最大宽度：599px）{
李海军{
显示：内联；
}
}

家
玉米卷
小时数
接触
关于
霍夫诺

剖面的左边距样式确保有空间放置导航。否则，绝对元素和静态元素将重叠
Lorem ipsum dolor sit amet，是一位杰出的献身者。不可抗拒的饮食、不可剥夺的权利、不可剥夺的权利、不可剥夺的权利、不可剥夺的权利。梅塞纳斯·尼尔斯·埃斯特、尤特丽斯·内克·康格·埃吉特、维塔·马萨拍卖行。前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭。Mauris ante Legula，facilisis sed ornare eu，lobortis in odio。这是一个巨大的挑战。在自由女神维尼那提斯统治下的奥纳雷·图皮斯（ornare turpis）。不要因为怀孕而失去生命。不发酵整粒玉米粥。枕侧颞门。克拉斯·ac·利奥·普卢斯。毛里斯·奎斯·迪亚姆·维利特。
注意调整浏览器大小时会发生什么。它工作得很好！

如果您想为导航设置一列（红色？），则需要删除其浮动和宽度

@media screen and (max-width:599px) {
    nav li {
        display: inline;
    }
    nav {
        float: none;
        width: auto;
    }
}

您将需要执行以下操作：

您的CSS有点随意，因此我希望这表明您在使用

@media

查询时必须覆盖某些设置；）

在媒体查询

@媒体屏幕和（最小宽度：600px）

尝试设置

nav{float:left；width:100%；}

和

部分{float:left；width:100%}

uhm，我只在教程后面；\uuh；那么教程是不是很糟糕？它的css布局教程…教程只由人类编写-我以前写过不正确的教程。我对这篇文章的贡献可能是不正确的——每个人都有自己的观点，在一个自由的世界里，我们有能力展示它：）我只是发布了一个补丁，没有更多。我的意见是你的CSS可以改进，仅此而已；）顺便说一句，谢谢你，你的回答是最好的，尽管奥雷林的牙床并不是那么坏！你可以通过使你的CSS保持一致来改进，这意味着你需要保持它的结构化和易于阅读。当我看它的时候，你和其他的

有点混淆。更不用说你设置特定的属性只是为了让它工作——这都是一个学习曲线，所以你只需要继续写更多的CSS：）我不明白它应该如何正确。。。。你能给我发一个改进的代码吗？你现在提到过它看起来会更好吗？是的，这很管用，但我还必须把nulify部分的边距部分{width:100%；margin left:0；}}nav{width:100%；}比nav{floaT:none，width:auto}好一点，因为当我使用第一个例子时，它把整个导航块涂成了红色。。。但当我使用第二个例子时，它只对NAV内部的高字体大小部分（而不是整个NAV块）着色。。。所以idk，如果有任何其他差异，或者两种解决方案都是正确的？

body {
    margin: 0 0;
    margin-bottom: 120px;
}
#container {
    box-sizing:border-box;
    width: 100%;
    border: 5px solid green;
}
section {
    border: 2px solid yellow;
    margin-left: 200px;
}
nav {
    background-color: red;
    width:200px;
    box-sizing:border-box;

        /*position: absolute;
    top:0;
    left:0px;*/
    float:left;
}
@media screen and (max-width:599px) {
    nav li  { display: inline; }
    nav     { width: 100%; text-align: center; }
    section { margin-left: 0 !important; }
}