我希望根据我创建的两个布局来提高页面的响应能力。
以下是我的查询断点：
@media screen and (max-width : 768px), screen and (min-width: 768px) and (max-width: 1024px) {
}
我的问题是纠正我在1024和1224的宽度之间调整浏览器时遇到的问题，特别是我要查看确保我的日历表。我已经在下面进一步详细解释了我的自我。 / p>
对于日历表，您可以尝试将浏览器宽度重新调整为1180px或略低于此值（chrome上的inspect元素告诉您浏览器宽度）..您会注意到日历位于垂直菜单栏下方.. at这个宽度大小我不希望这种情况发生..我希望日历单元格的大小减小
任何想法都表示赞赏。
这是我的演示：
/* Full width styling */
* {
margin: 0;
border: 0;
padding: 0;
}
body {
background: #F5F5F5;
color: #363636;
margin: 0;
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 20px;
}
h1 {
text-align: center;
font-size: 100%;
line-height: 120%;
padding: 5% 0 5% 0;
}
h2 {
line-height: 280%;
padding-left: 3%;
text-decoration: underline;
}
h3 {
line-height: 120%;
padding: 5% 0 5% 0;
}
p {
padding: 1%;
}
img {
text-align: center;
max-width: 100%;
height: auto;
width: auto;
}
a {
color: #FFFFFF;
font-weight: bold;
font-size: 20px;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
font-weight: bold;
text-decoration: underline;
}
header {
background-color: #3366FF;
width: 100%;
height: 86px;
position: fixed;
top: 0;
left: 0;
z-index: 100;
opacity: 0.90%;
}
#logo {
margin: 0px;
float: left;
width: 200px;
height: 86px;
background: url("../images/logo.png") no-repeat center;
}
nav {
float: right;
padding: 25px 20px 20px 0;
}
#menu-icon {
display: hidden;
width: 100px;
height: 86px;
background: url(http://www.w3newbie.com/wp-content/uploads/icon.png);
padding: 0;
margin: 0;
}
a:hover#menu-icon {
border-radius: 2px 2px 0 0;
}
ul {
list-style: none;
}
nav ul li {
display: inline-block;
float: left;
padding: 10px;
}
nav ul li a:hover {
color: #363636;
text-decoration: none;
}
section {
width: 29%;
float: left;
margin: 2% 2% 2% 2%;
text-align: center;
}
.clear {
clear: both;
}
#genericlinkdecoration {
color: #3366FF;
text-decoration: none;
font-weight: bold;
font-size: 14px;
}
footer {
background-color: #808080;
width: 100%;
overflow: hidden;
}
footer p,
footer h3 {
color: #FFFFFF;
}
footer p a {
color: #FFFFFF;
text-decoration: none;
font-weight: normal;
font-size: 14px;
}
ul.social li {
display: inline;
}
ul.social img {
height: 50px;
}
footer.footerTwo {
border-top: 1px solid #4D4350;
background-color: #3366FF;
text-align: center;
}
/* Media queries */
@media only screen and (max-width: 768px),
screen and (min-width: 768px) and (max-width: 1024px) {
body {
position: absolute;
}
header {
position: absolute;
}
#menu-icon {
display: inline-block;
}
nav {
padding: 0;
}
nav ul,
nav:active ul {
display: none;
position: absolute;
background: #FFFFFF;
border: 1px solid #D6D6D6;
right: 20px;
top: 60px;
width: 50%;
border-radius: 2px;
}
nav:hover ul {
display: block;
}
nav ul li a {
color: #363636;
text-decoration: none;
}
nav ul li a:hover {
color: #3366FF;
text-decoration: none;
}
nav li {
width: 100%;
margin: 0;
}
section {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
}
.horizontalmenubar {
margin-top: 86px;
background: #33DD00;
}
/*Strip the ul of padding and list styling*/
.horizontalmenubar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
/*Create a horizontal list with spacing*/
.horizontalmenubar li {
display: inline-block;
float: left;
margin-right: 2px;
width: 200px;
}
/*Style for menu links*/
.horizontalmenubar li a {
display: block;
text-align: center;
line-height: 50px;
color: #000000;
background: #D6D6D6;
text-decoration: none;
}
/*Hover state for top level links*/
.horizontalmenubar li:hover a {
background: #F5F5F5;
color: #3366FF;
border-bottom: 1px solid #000000;
}
/*Hide dropdown links until they are needed*/
.horizontalmenubar li ul {
display: none;
}
/*Make dropdown links vertical*/
.horizontalmenubar li ul li {
display: block;
float: none;
}
/* Style the <a> tag nested in sub-menus */
.horizontalmenubar li ul li a {
padding: 0 5px 0 5px;
line-height: 25px;
}
/* Style the hovering of the <a> tag nested in sub-menus */
.horizontalmenubar li:hover ul li a {
background: #D6D6D6;
color: #000000;
}
/* Style the hovering of the <a> tag nested in sub-menus */
.horizontalmenubar li ul li a:hover {
background: #F5F5F5;
color: #3366FF;
}
/*Display the dropdown on hover*/
.horizontalmenubar ul li a:hover + .hidden,
.hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #000000;
background: #D6D6D6;
text-align: center;
padding: 10px 0;
display: none;
font-weight: bold;
font-size: 20px;
}
/*Hide checkbox*/
.horizontalmenubar input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
.horizontalmenubar input[type=checkbox]:checked ~ #menu {
display: block;
}
/*Responsive Styles - horizontalmenubar */
@media screen and (max-width: 768px),
screen and (min-width: 768px) and (max-width: 1024px) {
/*Make dropdown links appear inline*/
.horizontalmenubar ul {
position: static;
display: none;
}
/*Create vertical spacing*/
.horizontalmenubar li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
.horizontalmenubar ul li,
li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display: block;
}
}
.maindiv {
width: 100%;
background: #FFCC00;
}
/* LHS div */
.div_lhs_menu {
margin: 10px 0 0 10px;
float: left;
}
/* Main menu */
.js-css-menu {
display: inline-block;
}
.js-css-menu,
.js-css-menu ul,
.js-css-menu li {
list-style: none;
padding: 0;
margin: 0;
}
.js-css-menu a {
text-decoration: none;
}
.js-css-menu > li {
display: inline-block;
float: left;
margin-top: 2px;
background-color: #D6D6D6;
}
.js-css-menu > li > a {
color: #000000;
display: block;
padding: 10px 15px;
}
.js-css-menu > li:hover > a {
background: #F5F5F5;
color: #3366FF;
}
/* Dropdown */
.js-css-menu > li div {
position: absolute;
display: none;
background: #D6D6D6;
}
.js-css-menu > li:hover div {
display: block;
}
.js-css-menu > li div ul {
float: none;
}
.js-css-menu > li div ul li {
padding: 10px 15px;
margin-bottom: 2px;
}
.js-css-menu > li div ul li:hover {
background: #FFFFFF;
color: #407D94;
}
.js-css-menu.vertical > li {
display: block;
float: none;
position: relative;
}
.js-css-menu.vertical > li div {
width: 150px;
top: 0;
left: 181px;
/* Adjust the left value according to the width of the vertical menu */
}
.js-css-menu.vertical > li div ul li:hover {
background: #FFFFFF;
color: #407D94;
}
.js-css-menu.vertical > li div ul li a {
color: #555;
}
/*Responsive Styles - .js-css-menu.vertical*/
@media screen and (max-width: 768px),
screen and (min-width: 768px) and (max-width: 1024px) {
/* Vertical */
.js-css-menu.vertical {
width: 100%;
/* Adjust the width of the vertical menu */
}
}
/* Generic table styling */
.overalldivcalendartable {
margin-top: 12px;
margin-left: 10px;
float: left;
}
table {
border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-size: 20px;
font-weight: bold;
padding: 6px;
vertical-align: top;
}
th:nth-of-type(1):before {
content: "Mon";
}
th:nth-of-type(2):before {
content: "Tue";
}
th:nth-of-type(3):before {
content: "Wed";
}
th:nth-of-type(4):before {
content: "Thu";
}
th:nth-of-type(5):before {
content: "Fri";
}
th:nth-of-type(6):before {
content: "Sat";
}
th:nth-of-type(7):before {
content: "Sun";
}
td {
padding: 6px;
border: 1px solid #ccc;
vertical-align: top;
width: 125px;
height: 100px;
}
/*Responsive Styles - div_lhs_menu and table */
@media screen and (max-width: 768px),
screen and (min-width: 768px) and (max-width: 1024px) {
.div_lhs_menu {
margin-left: 0;
width: 100%;
}
.overalldivcalendartable {
clear: both;
margin-top: 10px;
margin-left: 0px;
}
td,
th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
th:nth-of-type(1):before {
content: "M";
}
th:nth-of-type(2):before {
content: "T";
}
th:nth-of-type(3):before {
content: "W";
}
th:nth-of-type(4):before {
content: "T";
}
th:nth-of-type(5):before {
content: "F";
}
th:nth-of-type(6):before {
content: "S";
}
th:nth-of-type(7):before {
content: "S";
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title>QWERTY</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="stylesheets/blueberryresponsive.css">
<link rel="stylesheet" type="text/css" href="stylesheets/dashboardresponsive.css">
</head>
<body>
<header>
<a href="#" id="logo"></a>
<nav>
<a href="#" id="menu-icon"></a>
<ul>
<li><a href="#containerjoin">My Profile</a>
</li>
<!-- class="current" -->
<li><a href="#containerjoin">Log Out</a>
</li>
<!-- class="current" -->
<li><a href="#">Help and FAQs</a>
</li>
<li><a href="#contactus">Contact Us</a>
</li>
</ul>
</nav>
</header>
<div class="clear"></div>
<div class="horizontalmenubar">
<label for="show-menu" class="show-menu">MAIN MENU</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<!-- removed id="menu" -->
<li><a href="#">Dashboard</a>
<!-- <ul class="hidden">
<li><a href="#">SUB MENU OPTION</a></li>
<li><a href="#">SUB MENU OPTION</a></li>
</ul>-->
</li>
<li>
<a href="#">H MENU OPTION</a>
<!-- <ul class="hidden">
<li><a href="#">SUB MENU OPTION</a></li>
<li><a href="#">SUB MENU OPTION</a></li>
</ul>-->
</li>
<li>
<a href="#">H MENU OPTION</a>
<!-- <ul class="hidden">
<li><a href="#">SUB MENU OPTION</a></li>
<li><a href="#">SUB MENU OPTION</a></li>
</ul>-->
</li>
<li><a href="#">H MENU OPTION</a>
</li>
<li><a href="#">H MENU OPTION</a>
</li>
</ul>
</div>
<div class="clear"></div>
<div class="maindiv">
<div class="div_lhs_menu">
<ul class="js-css-menu responsive vertical">
<li><a href="#overalldivcalendartable">Calendar</a>
<!--<div>
<ul>
<li><b>Col 1</b></li>
<li><a href="#">Sublink 1</a></li>
<li><a href="#">Sublink 2</a></li>
<li><a href="#">Sublink 3</a></li>
</ul>
<ul>
<li><b>Col 1</b></li>
<li><a href="#">Sublink 1</a></li>
<li><a href="#">Sublink 2</a></li>
<li><a href="#">Sublink 3</a></li>
</ul>
</div> -->
</li>
<li><a href="#">Dboard option 2</a>
<!--<div>
<ul>
<li><b>Col 1</b></li>
<li><a href="#">Sublink 1</a></li>
<li><a href="#">Sublink 2</a></li>
<li><a href="#">Sublink 3</a></li>
</ul>
<ul>
<li><b>Col 1</b></li>
<li><a href="#">Sublink 1</a></li>
<li><a href="#">Sublink 2</a></li>
<li><a href="#">Sublink 3</a></li>
</ul>
</div> -->
</li>
<li><a href="#">Dboard option 3</a>
<!--<div>
<ul>
<li><b>Col 1</b></li>
<li><a href="#">Sublink 1</a></li>
<li><a href="#">Sublink 2</a></li>
<li><a href="#">Sublink 3</a></li>
</ul>
<ul>
<li><b>Col 1</b></li>
<li><a href="#">Sublink 1</a></li>
<li><a href="#">Sublink 2</a></li>
<li><a href="#">Sublink 3</a></li>
</ul>
</div> -->
</li>
</ul>
</div>
<!-- JS targets this div -->
<div class="overalldivcalendartable">
<table>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tbody>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td class="selected">17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="clear"></div>
<footer id="footer">
<section>
<h3>ABOUT US:</h3>
<p>qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..
<br>qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..
<br>
</p>
</section>
<section>
<h3>LIKE, FOLLOW OR WATCH US:</h3>
<ul class="social">
<li>
<a href="#">
<img src="http://www.w3newbie.com/wp-content/uploads/facebook.png" />
</a>
</li>
<li>
<a href="#">
<img src="http://www.w3newbie.com/wp-content/uploads/twitter1.png" />
</a>
</li>
<li>
<a href="#">
<img src="http://www.w3newbie.com/wp-content/uploads/youtube.png" />
</a>
</li>
</ul>
</section>
<section id="contactus">
<h3>CONTACT US:</h3>
<p>qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..
<br>
<br><b>qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..</b>
<br>
<br>qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..
<br>qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..</p>
</section>
</footer>
<footer class="footerTwo">
<p>Copyright © 2015 | qwerty Ltd | All rights reserved.</p>
</footer>
</body>
</html>
答案 0 :(得分：0)
您最好的方法可能是使用.overalldivcalendartable上的宽度百分比。因此，在表格滑到侧面菜单下方的断点处，将宽度设置为75％。
@media screen and (max-width : 1185px) {
.overalldivcalendartable {
width: 75%;
}
}
然后当其他响应功能开始播放，并且表格应该下拉到菜单下方时，您可以将宽度增加回100％。
@media screen and (max-width : 1024px) {
.overalldivcalendartable {
width: 100%;
}
}
请参阅小提琴here
通过将.div_lhs_menu宽度设置为25％，然后将.overalldivcalendartable设置为74％，您还可以在桌面上设置宽度并在侧面菜单设置为开始（页面加载），然后您不会在某个任意点减小宽度。