Как адаптивный дизайн плавно перетекает в мобильный дизайн? - PullRequest
0 голосов
/ 24 мая 2019

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

Вот jsfiddle , который в основном захватывает его (за исключением того, что jsfiddle не получает «Меню»в нужном месте - в правом верхнем углу на локальном диске).

HTML выглядит так:

<!DOCTYPE html>
<meta charset="utf-8" />

<head>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <link rel="stylesheet" type="text/css" media="all" href="blah.css">
</head>

<body>
  <div id="page">
    <div id="menu">
      <a class="burger" href="#" onclick="document.body.classList.toggle('menu')">Menu</a>
      <table id="menu-table" class="open">
        <tr>
          <th>Menu</th>
        </tr>
        <tr>
          <td>Foo</td>
        </tr>
        <tr>
          <td>Bar</td>
        </tr>
      </table>
    </div>
    <div class="page" id="blah">
      <h1>Blah</h1>
      blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
      blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
      blah blah blah blah blah blah blah blah blah
    </div>
  </div>
</body>

, а CSS выглядит так:

#page {
  background: #fff;
  color: #000;
  width: 100%;
  padding: 1em;
  min-height: 200px;
  max-width: 700px;
  overflow: hidden;
}

body {
  padding: 0px;
  margin: 0px;
}

#page .page h1 {
  text-align: center;
}

#menu {
  overflow: hidden;
}

#menu .open {
  background: #fff;
  position: fixed;
  top: 0px;
  z-index: 98;
  font-size: 150%;
  text-align: center;
  white-space: nowrap;
  text-overflow: clip;
}

#menu.burger {
  position: fixed;
  top: 0px;
  right: 0px;
  z-index: 99;
}

table,
tbody,
tr,
td,
th {
  margin: 0px;
  padding: 0px;
  border: 0px;
  border-collapse: collapse;
}

#menu-table {
  border: thin solid black;
  width: 200px;
}

#menu-table tr {
  height: 4ex;
}

#menu-table td {
  border: thin solid black;
  border-left-width: 0px;
  border-right-width: 0px;
}

#menu-table td:hover {
  background: #f8f8f8;
}

#menu-table th {
  background: #e0e0e0;
}

body.menu #menu .open {
  right: 0px;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

body:not(.menu) #menu .open {
  right: -210px;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

@media only screen and (min-width: 701px) {
  #page {
    /*        box-shadow: 0px 0px 35px 10px rgb(150,150,150); */
    margin: 0 auto;
    transform: translate(0px, 0px);
  }
  body {
    background: #888;
    color: #fff;
  }
}

@media only screen and (max-width: 700px) {
  #page {
    margin: 0px;
  }
}

Если вы измените размер окна чуть больше, чем текстовая область, правый дисплей будет неправильным.Если вы скопируете / вставите в локальный файл, вы также увидите, что меню не отображается должным образом при такой ширине.

Кроме того, в Safari все меню слева отображается вместо него справа.быть overflow: hidden И это очень запутано ... если дважды щелкнуть по нему, вы можете «выбрать» его часть, а затем, если вы откроете меню, «выделенная» часть будет выделена !!Но нажатие на него не очищает основной момент на призрачной версии.

1 Ответ

0 голосов
/ 24 мая 2019

Проблема с общим форматированием была padding: 1em, потому что max-width: 700px не включает отступы. Изменение на padding: 0px решило проблему, и я добавил margin: 1em к приложенному div. Я обновил jsfiddle, чтобы отразить это.

Однако ошибка Safari является постоянной. Я нашел взлом, чтобы заставить его уйти ... Я помещаю «скрытую» версию в -20000px - но это ужасный взлом! Это также портит мои переходы.

С помощью https://cubic -bezier.com / я смог получить переходы, которые работают нормально. Не так красиво, как было, но достаточно хорошо.

На самом деле он должен быть в -200px, но Chrome и Brave должен быть -201px, и, очевидно, Safari должен быть -20000px!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...