Question

我是HTML和CSS的新手，我想创建一个包含以下内容的响应式标题：

带有余量的徽标图片 - 完整分辨率时以像素为单位
pogo图片在全分辨率时必须具有全尺寸
导航菜单，包含6
，全分辨率时宽度为1500

No Bootstrap。你有什么建议来实现这个目标？我到目前为止所做的是没有响应，全尺寸（宽度：1920px）测量很好，它看起来应该如何，但当我尝试调整浏览器的大小时，它不在一行，即使我宣布div“内部“包含它们是宽度：100％，它们都是宽度：100％。

代码是这样的：

.inner{
      width:100%;
    }
    .navigation {
    display: inline-block;
    float: right;
    text-align: center;
    padding-top:47px;
    padding-bottom:27px;
    max-width:1555px;
    width:100%;
    }

    .navigation li{
      display: inline-block;
      width: 16%;
    }

    .navigation ul{
      max-width: 1500px;
    }

    .wrapper-logo{
      display: inline-block;
      max-width:365px;
      width:100%;
    }
    .small-logo{
      max-width: 143px;
      width:100%;
      padding-left:220px;
    }

    <div class="inner">
       <div class="logo-wrapper">
           <div class="small-logo">
               <img src="https://99designs-start-attachments.imgix.net/alchemy-pictures/2016%2F02%2F22%2F04%2F24%2F31%2Fb7bd820a-ecc0-4170-8f4e-3db2e73b0f4a%2F550250_artsigma.png?auto=format&ch=Width%2CDPR&w=250&h=250">
           </div>
       </div>
       <div class="navigation">
        <ul><li>......</li></ul>
       </div>
    </div>

Answer 1

使用媒体查询。

Here goes my Desktop resolution css 

    @media only screen and (max-width: 600px) {

    /* Here goes my Mobile resolution css */

        body {
            background-color: lightblue;
        }
    }

Answer 2

您需要类似以下内容的内容1

.small-logo {
    margin-left: 10%;
}
@media only screen and (max-width: 600px) {
    .small-logo {
        margin-left: 0;
    }
}

子弹2我猜猜应该说Logo不是Pogo。基于提供的代码.small-logo是您唯一的徽标，因此您可以执行此类操作。

.small-logo{
    width: 100%
}

导航菜单有6个？列？纽扣？独角兽？

将最大内容div的内部类或最好是id 设置为max我通常喜欢将内容居中并给出一些空白空间，因此我将基础知识放在评论中。

.inner{
    max-width: 1500px;
    width: 100%;
    /*width: 85%;
    margin: auto 0;*/
}

您是否尝试将徽标包装和导航水平对齐？

display: inline-block;

让div与另一个div响应

2 个答案: