Как мне сделать этот Навбар более отзывчивым?

Question

Я пытаюсь создать сайт и хочу, чтобы он был отзывчивым. Но я не хочу использовать Bootstrap из-за количества времени, которое требуется для загрузки. У меня навбар работает просто отлично (цвета поменяю и все позже). Но когда я уменьшаю его до размера мобильного телефона, кнопка из панели навигации скользит под остальными.

body {
  background: transparent linear-gradient(180deg, #000000 0%, #545454 100%) 0% 0% no-repeat padding-box;
}

#backtohome {
  font-family: 'Bangers', cursive;
  text-align: left;
  font-size: 60px;
  background: transparent;
  color: white
}

#home {
  font-family: 'Bangers', cursive;
  margin-left: 2%;
  font-size: 30px;
  background: transparent;
  color: white
}

#discord {
  font-family: 'Bangers', cursive;
  margin-left: 2%;
  font-size: 30px;
  background: transparent;
  color: white
}

#shop {
  font-family: 'Bangers', cursive;
  margin-left: 2%;
  font-size: 30px;
  background: transparent;
  color: white
}

<nav>
  <button id="backtohome" href="home.html">QsAGaming</button>
  <button id="home" href="home.html">Home</button>
  <button id="discord" href="home.html">Discord</button>
  <button id="shop" href="home.html">Shop</button>
</nav>
<div class="footer">
  <p id="footertext">©2020, QsA</p>
</div>

Я был бы признателен, если бы вы помогли мне превратить это в лучшую навигационную панель.

Answer 1

Вы можете использовать Media Querys css, чтобы сделать простую адаптивную систему.

<style>

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}


[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}
</style>

<div class="row">
  <div class="col-3 col-s-3 menu">
  </div>
  <div class="col-6 col-s-9">
  </div>
  <div class="col-3 col-s-12">
  </div>
</div>

Answer 2

Если вам нужен адаптивный веб-дизайн, вам лучше всего взглянуть на некоторые медиа-запросы:

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Всего наилучшего.

Answer 3

Так что хорошей идеей будет скрыть обычный nav на экранах мобильных телефонов и заменить его навигатором, скрывающимся под кнопкой гамбургера.

Читайте о media queries. Это будет очень удобно:)

Посмотрите на эти примеры, которые я нашел на коде.

https://codepen.io/ijaed/pen/ggmMqj

https://codepen.io/abdosteif/pen/bRoyMb?editors=1100

Используемые медиазапросы:

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

РЕДАКТИРОВАТЬ: У меня есть еще один совет. Старайтесь избегать стилизации с помощью #. Вместо этого используйте . классы:)

Answer 4

для обычного вы создаете навигационные панели с @media screen Смотрите здесь

, если вы просто хотите, чтобы текст был отзывчивым, вы можете использовать

vw-attribute

добавив, например, 5vw, вместо 60px к вашему тексту, он будет ориентирован на размер окна, поэтому ваш css должен выглядеть следующим образом:

 body {
  background: transparent linear-gradient(180deg, #000000 0%, #545454 100%) 0% 0% no- repeat padding-box;

}

#backtohome {
  font-family: 'Bangers', cursive;
  text-align: left;
  font-size: 5vw;
  background: transparent;
  color: white;

}

#home {
  font-family: 'Bangers', cursive;
  margin-left: 2%;
  font-size: 4vw;
  background: transparent;
  color: white
}

#discord {
  font-family: 'Bangers', cursive;
  margin-left: 2%;
  font-size: 4vw;
  background: transparent;
  color: white
}

#shop {
  font-family: 'Bangers', cursive;
  margin-left: 2%;
  font-size: 4vw;
  background: transparent;
  color: white
}

Answer 5

Если вы не хотите использовать Bootstrap, вы можете использовать то, что называется

Медиа-запрос https://www.w3schools.com/css/css3_mediaqueries_ex.asp

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

/* css for mobile */


/*css for laptop */

@media only screen and (min-width:1024px){}
 /*css for desktop*/

@media only screen and (min-width:1370px){}

запустите css свою панель навигации для размера экрана мобильного устройства, а затем просто немного измените медиазапрос для ноутбука.

например так:

/*css for mobile*/
button{ width:100%;}

/*css for laptop*/ 
@media only screen and (min-width:1024px){
 button{width:50%};
}

/*css for desktop*/
 @media only screen and (min-width:1370px){
  button{width:25%};
 }

Answer 6

Вы можете использовать em вместо абсолютного значения px. Попробуйте этот css код и посмотрите его результат

 body {
background: transparent linear-gradient(180deg, #000000 0%, #545454 100%) 0% 0% no-repeat padding-box;
 font-size: 10px;
}


#backtohome {
font-family: 'Bangers', cursive;
text-align: left;
font-size: 6em;
background: transparent;
color: white
}

#home {
font-family: 'Bangers', cursive;
margin-left: 2%;
font-size: 3em;
background: transparent;
color: white
}

#discord {
font-family: 'Bangers', cursive;
margin-left: 2%;
font-size: 3em;
background: transparent;
color: white
}

#shop {
font-family: 'Bangers', cursive;
margin-left: 2%;
font-size: 3em;
background: transparent;
color: white
}

@media only screen and (max-width: 567px){
  body {
    font-size: 5px;
  }
}

Answer 7

это довольно нормальное поведение жидкости. Если вы хотите, чтобы он был «более» отзывчивым, вы можете рассмотреть возможность использования точек останова с @media и поискать некоторые варианты сохранения для мобильных устройств.