Проблема с позиционированием 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

попробовать с это

@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 2

Вы должны поместить те в класс тоже чтобы заставить его работать так:

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

} 

И используйте «некоторый класс», где вы хотите эти свойства.

Вот то, что вы действительно хотите:

Примечание: нажмите 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 3

Извините, я не могу открыть ссылку из офиса. Однако, если я правильно понимаю вашу проблему, вам в основном нужно сделать вашу страницу красивой для небольших просмотров.

Пожалуйста, измените ваши @media к следующему:

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

Пара предложений: - Рекомендуется использовать максимальную ширину в 640 х, чтобы получить лучшие виды. - Вместо ширины, назначенной главному элементу, вы можете использовать max-width: 40em и width как 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) { 
 
\t nav ul li { 
 
\t \t display: inline; 
 
\t \t float: none; 
 
\t \t width: 100%; 
 
\t } 
 
\t main { 
 
\t \t float: left; 
 
\t \t width: 100%; 
 
\t \t margin: 1em; 
 
\t } 
 

 
}

<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>