Question

我正在制作新网站，但我遇到了一个小问题。当我调整浏览器大小或放大按钮移动到愚蠢的地方。

的index.html：

<head>

    <title>SquareWorld</title>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

    <link href="styles/index.css" rel="stylesheet" type="text/css"/>

</head>

<body>

    <header>

        <nav>

            <h1>SquareWorld</h1>

            <ul>

                <li><center><a href="#">Home</a></center></li>
                <li><center><a href="#">Video</a></center></li>
                <li><center><a href="#">Contact</a></center></li>
                <li><center><a href="#">Register</a></center></li>
                <li><center><a href="#">Download</a></center></li>

            </ul>

        </nav>

    </header>



</body>

样式/ index.css：

body {

margin: 0;
font-family: arial;

}

header {

background: #585858;
color: white;
padding: 15px 15px 15px 15px;

}

header h1 {

margin: 0;
display: inline;

}

nav ul {

margin: 0;
display: inline;

}

nav ul li {

list-style-type: none;
display: inline-block;
color: white;
background: black;
min-width: 100px;
border-radius: 15px;
position: relative;
padding: 5px 15px;

}

nav ul li a {

color: white;

}

反正是为了让它看起来更好还是我可以链接到某些敏感的课程？谢谢你的帮助！

Answer 1

我建议添加断点。例如，当您将窗口大小调整为700像素时，您希望代码以某种方式显示。

@media（max-width：700px）{ nav ul li {display：block：/ 这将使导航项目显示在一行中;只有当浏览器调整为700px及以下时才显示。 /}

}

@media（max-width：400px）{ }

您还可以查找Bootstrap，Foundation或Skeleton。这三个是很好的框架，使响应式设计更容易。

Answer 2

您正在使用css规则，使链接框显示为文本。浏览器会自动添加一些＆＃34;换行符＆＃34;当一个元素到达它的父元素的视觉结尾时。您可以使用媒体查询来避免此问题。有了这些，您可以为不同的屏幕尺寸定义不同的CSS样式。

以下是适合您网站的示例css：

@media (max-width: 900px) {
    nav ul li {
        min-width: 50px;
        max-width: 50px;
        font-size: 0.75em;
    }
}
@media (max-width: 700px) {
    nav ul li {
        min-width: 25px;
        max-width: 25px;
        font-size: 0.5em;
    }
    header h1 {
        font-size: 0.75em;
    }
}

注意：此代码对您的css代码附加！

说明：有两个媒体查询。媒体查询中的css规则仅在满足其条件（例如窗口宽度必须小于900px）时影响任何内容。第一个查询定义链接框以获得50像素的宽度，字体大小减少25％（周围字体大小的75％）。当窗口大小小于700像素的方框时， width设置为25px，字体大小会改变，标题的大小也会减小。

您可以在此处找到更多示例和条件列表： w3schools: CSS3 @media Rule

Answer 3

Responsive Grid Syste m是一个简单的响应式网站的“框架”。它基于媒体查询来设置浏览器窗口的像素宽度断点。从那里开始。 Bootstrap是一个更强大的框架，正确使用时具有内在的响应能力。从那里开始。

糟糕的网站响应

3 个答案: