Html 移动布局的CSS_Html_Css - Fatal编程技术网

Html 移动布局的CSS

html css

Html 移动布局的CSS,html,css,Html,Css,我需要帮助调整我的网站的CSS，使其移动友好。当您在主要桌面浏览器（如Chrome、IE和Firefox）中打开站点时，所有内容都会正确渲染，但如果我在mobile Safari或Chrome中打开站点，则渲染将关闭。奇怪的是，IE mobile也正确地呈现了站点 JSFIDLE在这里：指向live的URL为 HTML <!doctype html> <html> <html lang="eng"> <head>

我需要帮助调整我的网站的CSS，使其移动友好。当您在主要桌面浏览器（如Chrome、IE和Firefox）中打开站点时，所有内容都会正确渲染，但如果我在mobile Safari或Chrome中打开站点，则渲染将关闭。奇怪的是，IE mobile也正确地呈现了站点

JSFIDLE在这里：

指向live的URL为

HTML

<!doctype html>
<html>
    <html lang="eng">

        <head>
            <meta charset="utf-8" />
            <title>Lazy Quiz</title>
            <link rel="stylesheet" href="default.css" />
        </head>

        <body>
            <div class="wrapper">
                <header class="header">LAZY QUIZ</header>
                <article class="main">
                     <h2>Quiz of the Day!!</h2>

                    <iframe src="pages/QOD/qod.html"></iframe>
                </article>
                <aside class="aside aside-1">
                    <ul>
                        <li><a href="pages/Entertainment/entertainment.html">Entertainment</a>

                        </li>
                        <li><a href="pages/Entertainment/entertainment.html">Sports</a>

                        </li>
                        <li><a href="pages/Entertainment/entertainment.html">Games</a>

                        </li>
                        <li><a href="pages/Entertainment/entertainment.html">Geography</a>

                        </li>
                        <li><a href="pages/Entertainment/entertainment.html">History</a>

                        </li>
                    </ul>
                </aside>
                <aside class="aside aside-2">Aside 2</aside>
                <footer class="footer">
                    <ul>
                        <li>Home</li>
                        <li>About</li>
                        <li>Contact</li>
                    </ul>
                </footer>
            </div>
        </body>

    </html>

尝试添加元视口：


宽度：1000px.wrapper
元素上的code>样式应更改为最大宽度：1000px。这将允许您的站点在较宽的视口中仍保持1000px的宽度，但通过不强制其为1000px的宽度，允许它在较窄的视口中缩小，从而使站点具有响应性。
使用媒体查询
媒体查询示例
@media only screen and (min-width: 1490px)
{
}
@media only screen and (max-width: 1490px) and (min-width: 1366px)
{
}
@media only screen and (max-width: 1366px) and (min-width: 1280px) 
{
}
@media only screen and (max-width: 1280px) and (min-width: 1024px) 
{
}
@media only screen and (max-width: 1024px) and (min-width: 768px) 
{
}

我的意见是使用框架。你可以继续学习
编辑01
.wrapper {
  width: 100%;
}

根据设备类型（台式机、手机、平板电脑）更改HTML称为响应式设计。尝试谷歌搜索“响应式设计”，你会得到很多例子和教程。
@media only screen and (min-width: 1490px)
{
}
@media only screen and (max-width: 1490px) and (min-width: 1366px)
{
}
@media only screen and (max-width: 1366px) and (min-width: 1280px) 
{
}
@media only screen and (max-width: 1280px) and (min-width: 1024px) 
{
}
@media only screen and (max-width: 1024px) and (min-width: 768px) 
{
}

.wrapper {
  width: 100%;
}