Я пишу одностраничное приложение, и у меня возникла проблема с определенной шириной.На узких экранах я хочу использовать полную ширину, но я хочу ограничить ширину для удобства чтения на более широких экранах.Это в основном работает нормально, за исключением случаев, когда экран чуть выше предельной ширины плохо форматирует.
Вот 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
И это очень запутано ... если дважды щелкнуть по нему, вы можете «выбрать» его часть, а затем, если вы откроете меню, «выделенная» часть будет выделена !!Но нажатие на него не очищает основной момент на призрачной версии.