¿Cómo podría hacer responsive la página?

Este es mi CSS y a continuación pongo la primera parte del HTML. El problema es que al cambiar el ancho de la página se me separan los elementos del banner y el navcontainer. Quería que no sucediera esto, a poder ser manteniendo las medidas relativas para que sea "responsive".

   body{
        background-image: url(img/bg.jpg);
        padding: 0% 20%; 
        background-size: 100%;
    }
    #container{
        display:flex;
        flex-flow: row wrap;
        padding: 0%;
        margin: 0%;
        justify-content: center;
    
    }
    #banner{
        background-image: url(img/banner.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
        flex-basis: 100%;
        height: 11.5em;
        flex: 1 100%;
        padding-top: 0%;
        margin-top: 0%;  
    }
    #banner h1{
        text-align: right;
        margin-top: 0;
        margin-right: 3%;
    }
    #navcontainer{
        background-color: #bc5510;
        padding-top: 0%;
        margin-top: 0px;
        flex: 1 100%;
    }
    #navcontainer ul{display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-right: 15%;
    }
    #navcontainer #navlist{
        list-style:none;
    
    }
    #navlist li a:hover{
        color: lightgoldenrodyellow;
        background-image: url(img/menu_arrow.gif);
        background-repeat: no-repeat;
        background-position: 50% 100%;
        padding-bottom: 15%;
        
        
    }
    #sidebar{
        flex-direction: column;
        flex: 1 40%;
        margin-left: 4%;
        margin-right: 0px;
        padding: 0px;
    }
    #sidebar p, #sidebar form{
        max-width: 40%;
    } 
    #content{
        flex: 2 45%;
        margin-right: 3%;
        margin-left: -25%;
        padding: 0px;
    }
    #container-foot{
         flex: 1 100%;
        margin: 3%;
    }
    #content h2{
        color: chocolate;
    }
    
    blockquote{
        color:#B29B35;
        font-style: oblique;
    }
    #content a, #footer a{
        color:chocolate;
       font-weight:bold;
    }
    ul{
        list-style-type:square;
        color: chocolate;
    }
    a{
        text-decoration: none;
        color: black;
    }
    .readmore{
        background-image: url(img/document.gif);
        background-repeat: no-repeat;
        background-size: 12%;
        padding-left: 3%;
        margin-right: 2%;
    }
    .comments{
        background-image: url(img/comment.gif);
        background-repeat: no-repeat;
        background-size: 12%;
        padding-left: 3%;
        margin-right: 2%;
    }
    .date{
        background-image: url(img/clock.gif);
        background-repeat: no-repeat;
        background-size: 12%;
        padding-left: 3%;
        margin-right: 2%;
    }
    .info{
        color:#B29B35;
        
    }
    .post{
        border: 1px dashed;
        padding: 2%;
    }
    #sidebar,#content{
        padding-top: 3%;
    } 
<div id="container">
  <div id="banner">
    <h1>Company Name</h1>
  </div>
  <div id="navcontainer">
    <ul id="navlist">
      <li><a href="#">HOMEPAGE</a></li>
      <li id="active"><a id="current" href="#">ABOUT</a></li>
      <li><a href="#">GALLERY</a></li>
      <li><a href="#">LINKS</a></li>
      <li><a href="#">SERVICE</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
</div>
1
задан 22.11.2016, 18:09
3 ответа

Ты мог бы использовать media queries для твоего намерения. С ними, ты можешь определять, который будет максимальной шириной (или высота), посредством которой он изменится ты CSS.

Как пример использования, мы подумаем, что мы хотим изменить цвет текста между 700px и 500px ширины экрана (для любой стоимости, которая была бы между этими двумя) имея один пойдите miTexto.

#miTexto{
   color: red;
}

И позже внутри среднего показателя query ты установишь новый цвет для этого текста.

@media (max-width:700px) and (min-width:500px) {
    #miTexto{
        color: blue;
    }
}​

Сможешь делать это с любым свойством, чтобы точно подходить ты CSS в различную необходимость, которой требует твоя страница, изменив средства твоего браузера.

3
ответ дан 24.11.2019, 12:28
  • 1
    Уже, но моя проблема состоит в том, что я поместил все с пропорциональными средствами, и изменив ширину pá gina má s mí nimo меня прокручивают элементы и оставляют меня белым, где я не хочу (между другими проблемами). Со средним показателем queries он мне кажется, что serí в очень сложный помещать столько условий (tendrí которому навязывать средний показатель querie из-за каждого px, который уменьшал или расширял pá gina) – Sirc 22.11.2016, 17:57
  • 2
    @Sirc Проблема пропорциональных средств эта. Что в зависимости от экрана может вставлять тебя лучше или хуже. Однако, всегда ты можешь использовать он они происходит queries, чтобы идти " ajustando" стоимость оставляя край для того, чтобы очень различные экраны между sí не давайте ningú n проблема. – Francisco Romero 22.11.2016, 18:01
  • 3
    Идея состоит в том, чтобы ты закончил работу из-за твоего счета, давать ему стиль всей pá gina, и что остался в твой вкус, может быть длинная работа. @Error404 ты está показывая форму, как ты можешь приспосабливать твои стили для того, чтобы он был responsive. – Shaz 22.11.2016, 18:02
  • 4
    Ademá s ответа, что ты está давая @Error404 (Что я думаю, что это лучшее, что ты можешь делать или реализовывать), podrí чтобы давать тебе как другая solució n использование algú n framework как Bootstrap. Bootstrap - framework fá cil изучения, что está подумавший для всех видов разрешения экранов делая это responsive, и у которого есть различные компоненты, которые упрощают работу в разработчика, ademá s того, чтобы быть очень довольно документированным, и что Ваше сообщество очень большое. Я оставляю тебе ссылку в Ваш pá gina чиновник, aquí . – Hoose 22.11.2016, 18:10

Я буду давать тебе какие-то советы, которые могут улучшать тебе твой код CSS.

1 - Для banner и меню, добавь свойство position: absolute.
2 - не давай ему элементам высоту в единицах em, старайся давать это в px или в %.
3 - Если у тебя есть элемент с абсолютным положением, манипулируй свойством top вместо margin-top.

Я Думаю, что этих точек ты будешь встречать, с которым ты ищешь.

0
ответ дан 24.11.2019, 12:28

Сначала, он добавляет эту этикетку в конце твоего head html:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Он позволяет тебе конфигурировать ширину, высоту и масштаб, чтобы отображать контент.

Секунда, для лучшей команды в твоем коде, ты можешь создавать другой файл css для среднего показателя querys и ты это добавляешь к твоему html всегда после css образцы.

То, что ты должен делать со средним показателем querys, что-то как:

"Когда экран будет x размер, тогда сноп самый меньший / больший padding"

Например:

@media (max-width:700px) and (min-width:500px) {
    body{
      background-image: url(img/bg.jpg); // considera cambiar de fondo si se ve mal
      padding: 0%; // <<< nota que ahora el padding se redujo a 0% 
   }

}

Элементы, которые ты не изменяешь, остаются равным.

Рекомендуемое состоит в том, чтобы ты сделал, происходит их query в "среднем" размере и другом "парне", а именно, для tablets и для smarthphones. Здесь я оставляю тебе ссылку с большей информацией

В конце концов, с этим примером уже ты изменяешь твои стили, согласно которому ты желал, общим, что ты изменяешь, является margin и padding, но может быть любое свойство.

0
ответ дан 24.11.2019, 12:28