css - 当手机更改为横向时，响应式网站菜单按钮消失

Question

我在响应式网站上有一个菜单按钮，但我注意到它在我的三星手机上从纵向转到横向时消失了，无法看到导航链接。这是我正在使用的移动 css 代码。是否有任何弹出的东西可能导致问题。感谢您的帮助。

/* RESPONSIVE GRID SYSTEM MOBILE   =====================================================================  */

/*  MAKE LAYOUT RESPONSIVE at 1024px FOR SMALLER    SCREENS ================================================================ */

@media screen and (max-width: 1024px) {

body {
background-color: #f6f6f6;
}

header {
width: 93.75%; /* 960px / 1024px */
}
#maincontent{
width: 93.75%; /* 960px / 1024px */
}       
.maincontent{
width: 93.75%; /* 960px / 1024px */
}
footer {
width: 93.75%; /* 960px / 1024px */
}
img.image-3-2.features-home-image  {
margin: 1% auto 1% auto;
width: 100%;
max-width: 250px;       
}
img.logo-14, img.JVW-Logo, img.JVW-text-line {
display: block;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-right: 1px;
padding-left: 1px;
max-width: 250px;
}

.list-holder  {
display: block;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
width: 60%;
}

ul.unorder-list.unordered-list-1  {
width: 100%;
list-style-position: inside;
list-style-type: disc;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-size: 1.2em; /* 19 / 14 = 1 */
text-indent: -1em;
}   
}

/*  MAKE LAYOUT RESPONSIVE at 768px FOR IPAD       PORTRAIT ================================================================ */

@media screen and (max-width: 768px) {

body {
background-color: #f6f6f6;
}

header {
width: 93.75%; /* 720px / 768px */
}
#maincontent{
width: 93.75%; /* 720px / 768px */
}       
.maincontent{
width: 93.75%; /* 720px / 768px */
}       
footer {
width: 93.75%; /* 720px / 768px */
}
img.image-3-2.features-home-image  {
margin: 1% auto 1% auto;
width: 100%;
max-width:200px;        
}

img.logo-14, img.JVW-Logo, img.JVW-text-line {
display: block;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-right: 1px;
padding-left: 1px;
max-width: 220px;
}   

.list-holder  {
display: block;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
width: 70%;
}

ul.unorder-list.unordered-list-1 {
width: 100%;
list-style-position: inside;
list-style-type: disc;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-size: 1.2em; /* 19 / 14 = 1 */
text-indent: -1em;
}
nav { 
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}   
}

/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {

body {
background-color: #f6f6f6;
}
h3 { 
color: #623512;
margin-bottom: 0.3em;
font-size: 1.8em; /* 22 / 29 */
line-height: 1.6em; 
text-align: center; 
}
img.image-3-2.features-home-image  {
margin: 1% auto 1% auto;
width: 100%;
max-width: 220px;       
}

img.logo-14, img.JVW-Logo, img.JVW-text-line {
display: block;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-right: 1px;
padding-left: 1px;
width: 100%;
max-width: 220px;
}   

.list-holder  {
display: block;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
width: 60%;
}

ul.unorder-list.unordered-list-1 {
width: 90%;
list-style-position: inside;
list-style-type: disc;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-size: 1.2em; /* 19 / 14 = 1 */
text-indent: -1em;
}
nav { 
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media screen and (max-width: 480px) {

body {
background-color: #f6f6f6;
}
h3 { 
color: #623512;
margin-bottom: 0.3em;
font-size: 1.8em; /* 22 / 29 */
line-height: 1.6em; 
text-align: center; 
}
img.image-3-2.features-home-image  {
margin: 1% auto 1% auto;
width: 100%;
max-width: 240px;
border: 1px solid green;        
}

img.logo-14, img.JVW-Logo, img.JVW-text-line {
display: block;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-right: 1px;
padding-left: 1px;
width: 100%;
max-width: 340px;
}

.list-holder  {
display: block;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
width: 65%;
}

ul.unorder-list.unordered-list-1 {
width: 90%;
list-style-position: inside;
list-style-type: disc;
margin: 0px auto 0px auto;
padding: 0px 0px 0px 0px;
font-size: 1.2em; /* 24 / 18 = 1 */
text-indent: -1em;
}
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #889097;
width: 100%;
position: relative;
}
nav a#pull:after {
content: "";
background: url(img/nav-icon.png) no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}

/*Smartphone*/
@media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}

Answer 1

在您的媒体查询中，您还可以添加 orientation: landscape 或 orientation: portrait 作为条件，这样您就可以为横向和纵向模式设置不同的规则，例如

@media only screen and (width:320px) and (height:480px) and (orientation: landscape) {
  [... your rules for landscape mode only ... ]
}

...和纵向模式类似