Question

我在设置页面以适应智能手机上的观看时遇到困难。我尝试了display: none;的常规修正，并将.hidden添加到我需要消失的内容中。我甚至尝试过不应该起作用的组合，但认为值得像页脚h4.hidden一样。 xombined .hidden和display: none;并且在我需要离开的几个部分上工作，但页脚固执地停留。我研究了几个网站，包括这个网站，找不到比我更多的答案。

我将包含我的css样式页面，home.htm以及指向该网站的链接。

PS-这个网站非常棒，并且在很多方面为我提供了帮助！

＆＃13;

h1.hidden,

section.hidden,

footer h4.hidden {

  display: none;

}

body {

  background: rgb(99, 181, 237);

}

hgroup {

  background: rgb(151, 201, 151);

  -o-background-size: contain;

  -moz-background-size: contain;

  -webkit-background-size: contain;

  background-size: contain;

  height: 50px;

  width: 100%;

}

nav {

  width;

  100%;

}

@media screen and (orientation: portrait) {

  hgroup nav {

    font-size: 25px;

    color: rgb(0, 0, 255);

    margin: 15px;

    text-align: center;

  }

  nav li {

    display: block;

    background-image: url("arrow.png");

    background-position: right center;

    background-repeat: no-repeat;

    margin: 5px auto 5px auto;

    width: 60%;

    height: 50px;

    border: white solid 1px;

    -moz-border-radius: 10px;

    -webkit-border-radius: 10px;

    border-radius: 10px;

    -moz-box-shadow: inset rgba(51, 51, 51, 0.5) 10px -5px 20px;

    -webkit-box-shadow: inset rgba(51, 51, 51, 0.5) 10px -5px 20px;

    box-shadow: inset rgba(51, 51, 51, 0.5) 10px -5px 20px;

  }

  nav li:nth-child(odd) {

    background-color: rgb(224, 0, 0);

  }

  nav li:nth-child(even) {

    background-color: rgb(248, 0, 0);

  }

  nav li a {

    display: block;

    line-height: 50px;

    color: #98F5FF;

    text-align: center;

  }

  @media screen and (orientation: landscape) {

    /* Styles for Landscape screen */

  }

  nav {

    font-size: 25px;

    color: rgb(0, 0, 255);

    margin: 15px;

    text-align: center;

  }

  nav {

    display: block;

    background-image: url("arrow.png");

    background-position: right center;

    background-repeat: no-repeat;

    float: left;

    margin: 5px;

    width: 30%;

    height: 50px;

    border: white solid 1px;

    -moz-border-radius: 10px;

    -webkit-border-radius: 10px;

    border-radius: 10px;

    -moz-box-shadow: inset rgba(51, 51, 51, 0.5) 10px -5px 20px;

    -webkit-box-shadow: inset rgba(51, 51, 51, 0.5) 10px -5px 20px;

    box-shadow: inset rgba(51, 51, 51, 0.5) 10px -5px 20px;

  }

  nav li:nth-child(odd) {

    background-color: rgb(224, 0, 0);

  }

  nav li:nth-child(even) {

    background-color: rgb(248, 0, 0);

  }

  nav li a {

    display: block;

    line-height: 50px;

    color: #98F5FF;

    text-align: center;

  }

}

＆＃13;

这是HTML

＆＃13;

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

<title>Sealey Body Repair</title>
<script src="modernizr-1.5.js"></script>
<link href="sealey_stylesheet.css" rel="stylesheet" media="screen and (min-width: 501px)" />
<link href="sealey_desktop.css" rel="stylesheet" media="screen and (min-width: 501px)" />
<link href="sealey_printmedia_stylesheet.css" rel="stylesheet" media="screen and (min-width: 501px)" />

<!-- Style sheet links for Internet Explorer prior to version 9 -->
<!-- [if 1t IE 9]>
		<link href="sealey_stylesheet.css" rel="stylesheet" media="screen" />
		<link href="sealey_desktop.css" rel="stylesheet" media="screen" />
	  <![endif]-->

<link href="sealey_mobile.css" rel="stylesheet" media="only screen and (max-width: 500px)" />
<!--<link href="sealey.css" rel="stylesheet" media="only screen and (max-width: 700px)" />-->


</head>

<body>

  <hgroup>
    <h1 align="center"><img src="images/banner.jpg" alt="Sealey Banner" /></h1>
    <!-- image obtained from Pixabay, free of copyrights under Creative Commons CC0 into the public domain.-->
    <nav>
      <ul>
        <li><a href="sealey_home.htm">Home</a>
        </li>
        <li><a href="sealey_services.htm">Services</a>
        </li>
        <li><a href="sealey_about.htm">About Us</a>
        </li>
        <li><a href="sealey_contact.htm">Contact Us</a>
        </li>
        <li><a href="sealey_photos.htm">Photos</a>
        </li>
      </ul>
    </nav>
    <h1 align="center">Welcome to Sealey Body Shop, Inc.</h1>
    <h2 align="center">The Best Auto Body Shop in Hastings</h2>
  </hgroup>

  <section>
    <p>Sealey Body Shop, Inc. is a family-owned business in Hastings Nebraska.</p>
  </section>

  <section id="reviews">
    <h2 align="left">Customer Reviews</h2>
    <blockquote>
      <p>"I'm very happy with the repair by Sealey! "&#8212;<cite>Rachael Broadwell</cite>
      </p>
      <p>"Great work! I really appreciate it. "&#8212;<cite>Hillary Broadwell</cite>
      </p>
      <p>"Fast, high quality, and a great price! "&#8212;<cite>Janelle Broadwell</cite>
      </p>
      <p>"Thanks so much! Best car repair shop in Hastings!! "&#8212;<cite>Rachael Broadwell</cite>
      </p>
    </blockquote>
  </section>

  <section align="left">
    <img src="images/sealey_lrg.jpg" alt="Sealey Shop Exterior" />
    <img src="images/plackard.jpg" alt="Sealey Plackard" />
    <img src="images/classiccarsresize2.jpg" alt="Classic Car Restoration" />
  </section>

  <br />
  <br />

  <footer>
    <h4 align="center"><address>Sealey Body Shop &bull; 201 S. Hastings Ave. &bull; Hastings, NE 68901 &bull; (402) 461-3244</address></h4>
    <h4 align="center"><img src="images/sealeylogo.png" alt="Sealey Logo" /></h4>
  </footer>

</body>

＆＃13;

A site being done in a class for a local area body shop

Answer 1

将以下代码添加到CSS文件中。

  @media only screen and (max-width: 500px) {
    footer {
      display:none;
    }
  }

在以下代码段中，当屏幕尺寸减小到500px时，您可以看到页脚将消失。

＆＃13;

h1.hidden,

section.hidden,

footer h4.hidden {

  display: none;

}

body {

  background: rgb(99, 181, 237);

}

hgroup {

  background: rgb(151, 201, 151);

  -o-background-size: contain;

  -moz-background-size: contain;

  -webkit-background-size: contain;

  background-size: contain;

  height: 50px;

  width: 100%;

}

nav {

  width;

  100%;

}

@media screen and (orientation: portrait) {

  hgroup nav {

    font-size: 25px;

    color: rgb(0, 0, 255);

    margin: 15px;

    text-align: center;

  }

  nav li {

    display: block;

    background-image: url("arrow.png");

    background-position: right center;

    background-repeat: no-repeat;

    margin: 5px auto 5px auto;

    width: 60%;

    height: 50px;

    border: white solid 1px;

    -moz-border-radius: 10px;

    -webkit-border-radius: 10px;

    border-radius: 10px;

    -moz-box-shadow: inset rgba(51, 51, 51, 0.5) 10px -5px 20px;

    -webkit-box-shadow: inset rgba(51, 51, 51, 0.5) 10px -5px 20px;

    box-shadow: inset rgba(51, 51, 51, 0.5) 10px -5px 20px;

  }

  nav li:nth-child(odd) {

    background-color: rgb(224, 0, 0);

  }

  nav li:nth-child(even) {

    background-color: rgb(248, 0, 0);

  }

  nav li a {

    display: block;

    line-height: 50px;

    color: #98F5FF;

    text-align: center;

  }
  
  @media only screen and (max-width: 500px) {
    footer {
      display:none;
    }
  }

  @media screen and (orientation: landscape) {

    /* Styles for Landscape screen */

  }

  nav {

    font-size: 25px;

    color: rgb(0, 0, 255);

    margin: 15px;

    text-align: center;

  }

  nav {

    display: block;

    background-image: url("arrow.png");

    background-position: right center;

    background-repeat: no-repeat;

    float: left;

    margin: 5px;

    width: 30%;

    height: 50px;

    border: white solid 1px;

    -moz-border-radius: 10px;

    -webkit-border-radius: 10px;

    border-radius: 10px;

    -moz-box-shadow: inset rgba(51, 51, 51, 0.5) 10px -5px 20px;

    -webkit-box-shadow: inset rgba(51, 51, 51, 0.5) 10px -5px 20px;

    box-shadow: inset rgba(51, 51, 51, 0.5) 10px -5px 20px;

  }

  nav li:nth-child(odd) {

    background-color: rgb(224, 0, 0);

  }

  nav li:nth-child(even) {

    background-color: rgb(248, 0, 0);

  }

  nav li a {

    display: block;

    line-height: 50px;

    color: #98F5FF;

    text-align: center;

  }

}

＆＃13;

<!-- begin snippet: js hide: false -->

＆＃13;

<!-- end snippet -->

Answer 2

我不相信您的问题有一个完美的解决方案，因为移动设备的大小和功能各不相同。尽管如此，如果你可以使用JS，你可以检测浏览器的窗口是否有触摸事件，就像大多数移动设备那样。这是我相信Modernizr的方法。

这是您需要的代码段：

var hasTouch = 'ontouchstart' in window;

if (!hasTouch) {
    var root = document.documentElement;
    root.classList.add('no-touch');
}

然后在你的CSS中，将你的页脚设置如下：

footer {
    display: none;
}

.no-touch footer {
    display: block;
}

编辑：

为了考虑屏幕尺寸，其他人提到的答案是媒体查询。以下是两个组合：

footer {
    display: none;
}

@media only screen and (min-width: 500px) {
    .no-touch footer {
         display: block;
    }
}

Answer 3

为您定位的屏幕尺寸添加媒体查询，并使用display: none。

以下是一个例子：

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
   footer{
      display: none;
   }
}

对于设备屏幕尺寸的标准列表，visit。

Answer 4

footer{
  @media screen and (min-width: 480px)
  display:none;
}

你必须把你希望页脚隐藏在媒体中的CSS加入

在移动设备查看时，使用css写入的页脚消失

4 个答案:

编辑：