css: десктопный и мобильный сайты

217

29 мая 2018, 07:10

Сделал сайт, который комфортно выглядит на мониторе, но на телефоне есть некоторые дискомфортные элементы:

1) меню слишком мелкое

2) некоторые элементы сайта (например боковое меню) можно скрыть и выдавать при нажатии, чтобы больше места под основную информацию освободилось

и т.д.

В общем почти всё лечится изменением css стилей для некоторых элементов

В связи с этим вопрос - как оптимальнее и правильнее решать проблему сайтов для мобильных платформ?

Первое что приходит в голову - при загрузке сайта определять, что он запущен на мобильной платформе и запускать дублированную страничку с другими стилями (+ немного JS кода). Такой подход, как я понимаю, используется часто (например, lenta.ru и m.lenta.ru)

Второе - уже после загрузки сайта определять мобильную платформу и догружать дополнительный стиль css

Подскажите, как корректнее в 21 веке :) решать подобную задачу.

Answer 1

Зачем дублировать, если нужно скрыть меню или какой-то sidebar то заранее сделайте например ту же кнопку бургер-меню, прикрепите к ней toggle на открытие и закрытие боковой панели или меню, и отображайте её на мобильных устройствах, а сам сайдбар скрывайте. Обязательно пропишите viewport для корректной адаптации и меняйте css на разных медиа брейкпоинтах.

Answer 2

Примерно так меню сворачивают в иконку и это видно при экране равном или меньше 560px

Что я сделал?

При первом медиа запросе я уменьшил шрифты

А вот во втором уже я слепил некую иконку span.trigger внутри которого i всё блочное и имеет высоту и ширину и видно это только при меньше 560px и эта же кнопочка вызывает меню ..саму кнопку я вынул из потока position:fixed; а меню само я задвинул влево -100% а при клике на эту кнопочку добавляю класс на jQuery open собственно вся магия

здесь можешь потренироваться и подвигать окошко сниппета для проверки адаптивности

разумеется что наличие <meta name="viewport" content="width=device-width, initial-scale=1.0"> обязательно

так же можно развернуть пример на весь экран а сам браузер свернуть до нужного размера и тогда можно обойтись без codepen

$(".trigger").on("click", function() { 
  $("ul").toggleClass("open"); 
})

:root { 
  --num: 30px; 
  /*высота меню*/ 
} 
 
* { 
  list-style-type: none; 
  text-decoration: none; 
  max-width: 100%; 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
header { 
  width: 100%; 
  height: 200px; 
  background: linear-gradient(lightgreen, green); 
  position: relative; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
} 
 
ul { 
  display: flex; 
  justify-content: space-around; 
  width: 50%; 
  height: var(--num); 
  align-items: center; 
  position: absolute; 
  top: calc(100% - var(--num)); 
  right: 0; 
} 
 
ul li { 
  position: relative; 
  width: 100%; 
  text-align: center; 
} 
 
ul li a { 
  font-size: 1.2em; 
  font-variant: small-caps; 
  font-weight: 900; 
  font-family: Helvetica; 
  color: #fff; 
} 
 
ul li:before { 
  content: ""; 
  display: block; 
  width: 0; 
  height: 3px; 
  background: #fff; 
  position: absolute; 
  top: calc(100% - 3px); 
  left: 50%; 
  right: 50%; 
  transition: all .7s linear; 
} 
 
ul li:hover:before { 
  left: 0; 
  right: 0; 
  width: 100%; 
} 
 
.header__item { 
  text-transform: uppercase; 
  font-size: 2.4em; 
  font-weight: 900; 
  font-family: Helvetica; 
  color: #fff; 
} 
 
.header__item p { 
  font-size: 14px; 
} 
 
@media (max-width:764px) { 
  .header__item { 
    font-size: 2em; 
  } 
  ul { 
    width: 60%; 
  } 
  ul li a { 
    font-size: 1em; 
  } 
} 
 
@media (max-width:560px) { 
  .header__item { 
    font-size: 1.6em; 
  } 
  ul { 
    display: block; 
    height: 100vh; 
    width: auto; 
    background: inherit; 
    padding: 20px; 
    left: -100%; 
    right: auto; 
    top: 0; 
    bottom: auto; 
    transition: 1s; 
    box-shadow: 0 0 30px #000; 
  } 
  ul li { 
    padding: 10px 0; 
  } 
  span.trigger { 
    display: block; 
    background: none; 
    position: fixed; 
    top: 5px; 
    right: 5px; 
  } 
  span.trigger i { 
    display: block; 
    width: 30px; 
    height: 6px; 
    background: #fff; 
    margin: 4px auto; 
  } 
  .open { 
    left: 0; 
    width: 200px; 
  } 
}

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<header> 
  <div class="header__item"> 
    Блог Пупкина Заумкина 
    <p>я программист и знаю jquery</p> 
  </div> 
  <ul> 
    <span class="trigger"> 
      <i></i> 
      <i></i> 
      <i></i> 
    </span> 
    <li><a href="">text1</a></li> 
    <li><a href="">text2</a></li> 
    <li><a href="">text3</a></li> 
    <li><a href="">text4</a></li> 
    <li><a href="">text5</a></li> 
  </ul> 
</header>