时间戳

首页 > 解决方案 > 如何让响应式设计顺利融入移动设计？

html - 如何让响应式设计顺利融入移动设计？

问题描述

我正在编写一个单页应用程序，并且在特定宽度处遇到问题。在窄屏幕上时，我想使用全宽，但我想限制宽度以便在更宽的屏幕上可读。这大部分工作正常，除非屏幕刚好高于限制宽度，它的格式很差。

这是一个主要捕获它的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并且它非常混乱......如果你双击它，你可以“选择”它的一部分，然后如果你打开菜单，“选中”部分高亮！！但是点击它并不会清除ghost版本的突出显示。

标签： htmlcsssafari

解决方案

一般格式的问题是padding: 1em因为max-width: 700px不包括填充。更改它以padding: 0px解决问题，我margin: 1em在随附的div. 我更新了 jsfiddle 以反映这一点。

然而，Safari 错误是持久的。我找到了一个可以让它消失的黑客...我将“隐藏”版本定位在 -20000px - 但这是一个可怕的黑客！它也弄乱了我的过渡。

在https://cubic-bezier.com/的帮助下，我能够获得可以正常工作的过渡。没有以前那么漂亮，但已经足够好了。

它应该是 -200px，但 Chrome 和 Brave 需要它是 -201px，显然 Safari 需要它是 -20000px ！

推荐阅读