CSS 小屏幕定位问题

Question

我需要为我的网页添加 CSS 以使其更适合小屏幕和手机。我的 @media 修改似乎不起作用。我必须让它看起来像这样：

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  margin: 0.2em;
  padding: 0.75em 1em;
  background: #689;
  background-image: linear-gradient(to bottom, #689, #245);
  border-radius: 1.25em;
}
nav a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

h1 {
  text-align: center;
}
nav {
   float: left;
   padding-right: 30px;
   width: 15%;
}
main {
   float: left;
   width: 40em;
}

@media (max-width: 480px) { 
  float: none;
  display: inline;
}

<h1 id="top">Protocols</h1>
 
<nav>
  <ul>
  <li><a href="#top">Top of Page</a></li>
  <li><a href="#email">Email</a></li>
  <li><a href="#http">HTTP</a></li>
  </ul>
</nav>


<main>
<p><dfn>Protocols</dfn> (or <dfn>communications protocols</dfn>) are agreed ways for to computers to communicate and exchange information. The Wikipedia page on <a href="https://en.wikipedia.org/wiki/Communications_protocol">communications protocols</a> contains much more information than we can cover here.</p>
  
<section id="email">
<h2>Email Protocols</h2>
<p>There are several protocols that make email work:</p>
<ul>
<li><p><abbr title="Internet Message Access Protocol">IMAP</abbr> is used to fetch mail from the server so you can read it in clients like Thunderbird or on your phone.</p></li>
<li><p><abbr title="Post Office Protocol">POP</abbr> is an older protocol that does the same job as IMAP, but is less flexible.</p></li>
<li><p>The <abbr title="Simple Mail Transfer Protocol">SMTP</abbr> protocol is used to send email, either from a client program you are using, or from one mail server to another. SMTP has existed since the 1980s, but has been extended several times to add user authentication, encryption, and other features.</p>
<p>SMTP is where most spam fighting happens: preventing fraudulent email from being sent the the ultimate goal.</p></li>
</ul>
</section>
  
<section id="http">
<h2>HTTP</h2>
<p>The  <a href="https://en.wikipedia.org/wiki/World_Wide_Web">World Wide Web</a> rests on the protocol <abbr title="Hypertext Transfer Protocol">HTTP</abbr>.</p>
<p>HTTP is a client-server protocol. That means that an HTTP client (like a web browser, also called a &ldquo;user agent&rdquo;) contacts an HTTP server and makes a request. The request is likely a request for a particular web page available on that server. The server will respond with a response: often the contents of the web page that was requested.</p>
  <section id="uses">
  <h3>Uses</h3>
  <p>HTTP is often used to transfer <abbr title="Hypertext Markup Language">HTML</abbr> documents which we generally think of as &ldquo;web pages&rdquo;. HTML contains markup like <code class="html">&lt;em&gt;</code> and <code class="html">&lt;a href="http://example.com/"&gt;</code>.</p>
  <p>Every piece of content available on the web is called a <dfn>resource</dfn> and is available at a URL like <code class="url">http://example.com/somepage.html</code>.</p>
  </section>
</section>
 
</main>

Answer 1

您也应该将它们放入 class 以使其像这样工作：

@media (max-width: 480px) { 
  .some-class {
    float: none;
    display: inline;
  }

}

并在需要这些属性的地方使用 "some-class"。

这是您真正想要的：

注意: 按 F12 并使页面宽度小于 480px 以查看实际效果

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  margin: 0.2em;
  padding: 0.75em 1em;
  background: #689;
  background-image: linear-gradient(to bottom, #689, #245);
  border-radius: 1.25em;
}
nav a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

h1 {
  text-align: center;
}
nav {
   float: left;
   padding-right: 30px;
   width: 15%;
}
main {
   float: left;
   width: 40em;
}

@media (max-width: 480px) { 
  
  li, ul, nav {
    float: none;
    display: inline;
  }
  
}

<h1 id="top">Protocols</h1>
 
<nav>
  <ul>
  <li><a href="#top">Top of Page</a></li>
  <li><a href="#email">Email</a></li>
  <li><a href="#http">HTTP</a></li>
  </ul>
</nav>


<main>
<p><dfn>Protocols</dfn> (or <dfn>communications protocols</dfn>) are agreed ways for to computers to communicate and exchange information. The Wikipedia page on <a href="https://en.wikipedia.org/wiki/Communications_protocol">communications protocols</a> contains much more information than we can cover here.</p>
  
<section id="email">
<h2>Email Protocols</h2>
<p>There are several protocols that make email work:</p>
<ul>
<li><p><abbr title="Internet Message Access Protocol">IMAP</abbr> is used to fetch mail from the server so you can read it in clients like Thunderbird or on your phone.</p></li>
<li><p><abbr title="Post Office Protocol">POP</abbr> is an older protocol that does the same job as IMAP, but is less flexible.</p></li>
<li><p>The <abbr title="Simple Mail Transfer Protocol">SMTP</abbr> protocol is used to send email, either from a client program you are using, or from one mail server to another. SMTP has existed since the 1980s, but has been extended several times to add user authentication, encryption, and other features.</p>
<p>SMTP is where most spam fighting happens: preventing fraudulent email from being sent the the ultimate goal.</p></li>
</ul>
</section>
  
<section id="http">
<h2>HTTP</h2>
<p>The  <a href="https://en.wikipedia.org/wiki/World_Wide_Web">World Wide Web</a> rests on the protocol <abbr title="Hypertext Transfer Protocol">HTTP</abbr>.</p>
<p>HTTP is a client-server protocol. That means that an HTTP client (like a web browser, also called a &ldquo;user agent&rdquo;) contacts an HTTP server and makes a request. The request is likely a request for a particular web page available on that server. The server will respond with a response: often the contents of the web page that was requested.</p>
  <section id="uses">
  <h3>Uses</h3>
  <p>HTTP is often used to transfer <abbr title="Hypertext Markup Language">HTML</abbr> documents which we generally think of as &ldquo;web pages&rdquo;. HTML contains markup like <code class="html">&lt;em&gt;</code> and <code class="html">&lt;a href="http://example.com/"&gt;</code>.</p>
  <p>Every piece of content available on the web is called a <dfn>resource</dfn> and is available at a URL like <code class="url">http://example.com/somepage.html</code>.</p>
  </section>
</section>
 
</main>

Answer 2

试试这个

@media (max-width: 480px) { 
 nav {
    float: left;
    padding-right: 0;
    width: 100%;
 } 
 main {
    float: left;
    width: 100%;
  }
 nav ul li {
    display:inline-block;
    width:auto;
  }

}

Answer 3

抱歉，我无法从办公室打开 link。但是，如果我正确理解您的问题，那么您基本上需要让您的页面在较小的视点上看起来很好。

请将您的@media 修改为以下内容：

@media (max-width: 480px) { 
  nav{
    float: none;
    width: 100%;
    padding-right: 0;
  }
  main {
   float: left;
   width: auto;
  }
}

几个建议： - 建议使用 max-width 到 640px 以获得更好的视图。 - 您可以使用 max-width:40em 和宽度为 100% 而不是分配给主要元素的宽度，这样您就不需要覆盖其他视口。

希望对您有所帮助！

Answer 4

试试这个

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  margin: 0.2em;
  padding: 0.75em 1em;
  background: #689;
  background-image: linear-gradient(to bottom, #689, #245);
  border-radius: 1.25em;
}
nav a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

h1 {
  text-align: center;
}
nav {
   float: left;
   padding-right: 30px;
   width: 15%;
}
main {
   float: left;
   width: 40em;
}

@media (max-width: 480px) {
 nav ul li {
  display: inline;
  float: none;
  width: 100%;
 }
 main {
  float: left;
  width: 100%;
  margin: 1em;
 }

}

<h1 id="top">Protocols</h1>
 
<nav>
  <ul>
  <li><a href="#top">Top of Page</a></li>
  <li><a href="#email">Email</a></li>
  <li><a href="#http">HTTP</a></li>
  </ul>
</nav>


<main>
<p><dfn>Protocols</dfn> (or <dfn>communications protocols</dfn>) are agreed ways for to computers to communicate and exchange information. The Wikipedia page on <a href="https://en.wikipedia.org/wiki/Communications_protocol">communications protocols</a> contains much more information than we can cover here.</p>
  
<section id="email">
<h2>Email Protocols</h2>
<p>There are several protocols that make email work:</p>
<ul>
<li><p><abbr title="Internet Message Access Protocol">IMAP</abbr> is used to fetch mail from the server so you can read it in clients like Thunderbird or on your phone.</p></li>
<li><p><abbr title="Post Office Protocol">POP</abbr> is an older protocol that does the same job as IMAP, but is less flexible.</p></li>
<li><p>The <abbr title="Simple Mail Transfer Protocol">SMTP</abbr> protocol is used to send email, either from a client program you are using, or from one mail server to another. SMTP has existed since the 1980s, but has been extended several times to add user authentication, encryption, and other features.</p>
<p>SMTP is where most spam fighting happens: preventing fraudulent email from being sent the the ultimate goal.</p></li>
</ul>
</section>
  
<section id="http">
<h2>HTTP</h2>
<p>The  <a href="https://en.wikipedia.org/wiki/World_Wide_Web">World Wide Web</a> rests on the protocol <abbr title="Hypertext Transfer Protocol">HTTP</abbr>.</p>
<p>HTTP is a client-server protocol. That means that an HTTP client (like a web browser, also called a &ldquo;user agent&rdquo;) contacts an HTTP server and makes a request. The request is likely a request for a particular web page available on that server. The server will respond with a response: often the contents of the web page that was requested.</p>
  <section id="uses">
  <h3>Uses</h3>
  <p>HTTP is often used to transfer <abbr title="Hypertext Markup Language">HTML</abbr> documents which we generally think of as &ldquo;web pages&rdquo;. HTML contains markup like <code class="html">&lt;em&gt;</code> and <code class="html">&lt;a href="http://example.com/"&gt;</code>.</p>
  <p>Every piece of content available on the web is called a <dfn>resource</dfn> and is available at a URL like <code class="url">http://example.com/somepage.html</code>.</p>
  </section>
</section>
 
</main>

CSS 小屏幕定位问题

Trouble with CSS positioning for small screen

html

css

css-float

css-position

positioning