responsive - 响应式网站不是真正响应式的
问题描述
我刚刚开始进行网络开发,并制作了带有徽标和导航栏的网站的简单标题。问题是该网站应该响应并更改布局(将其调整为 580 像素)在两列中显示菜单,但事实并非如此。同样,当网站完全扩展时,应该在一行中显示菜单,但它也很混乱。你能看一下代码并告诉我有什么问题吗?
干得好:
HTML:
<!DOCTYPE html>
<html lange="en">
<head>
<meta charset="utf-8" />
<title>Painting with responsive menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel = "stylesheet"
type = "text/css"
href = "stylesheet6.css" />
</head>
<body>
<div class="wrapper">
<header>
<a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/paintinglogo.png"></a>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</body>
</html>
CSS:
.wrapper{
margin: 0 auto;
max-width: 1220px;
width: 98%;
background-color: #2F3038;
padding: 2%;
border-radius: 2px;
}
header{
width: 98%;
min-height: 100px;
padding: 5px;
margin-bottom: -40px;
text-align: center;
}
img{
text-align: center;
max-width: 100%;
height: auto;
width: auto;
}
nav {
width: 90%;
margin: 5% auto;
overflow: hidden;
}
nav ul{
list-style: none;
overflow: hidden;
}
nav ul li a {
background-color: #737373;
border: 1px solid #2F3038;
color: #2F3038;
display: block;
float: left;
font: 16px, Arial, Helvitica;
padding: 10px;
text-align: center;
text-decoration: none;
width: 16.5%;
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
-ms-transition: background 0.5s ease;
transition: background 0.5s ease;
}
nav li a:hover{
background: #DADADA;
}
/*-------------------Media Queries------------*/
@media only screen and (max-width: 580px){
nav li a{
width: 50%;
font: 13px Arial, Helvitica;
padding-top: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #2F3038;
}
nav li:nth-child(even) a{
border-right: none;
}
}
多谢你们 !
解决方案
你有几个错误:
- 不使用
box-sizing: border-box
会给你错误的宽度计算,nav ul li a
因为宽度16.5%不包括填充,因此强制换行 - 您使用了错误的工具(浮点数) - 最好使用带有包装的 Flexbox
*
{
box-sizing: border-box;
}
.wrapper{
margin: 0 auto;
max-width: 1220px;
width: 98%;
background-color: #2F3038;
padding: 2%;
border-radius: 2px;
}
header{
width: 98%;
min-height: 100px;
padding: 5px;
margin-bottom: -40px;
text-align: center;
}
img{
text-align: center;
max-width: 100%;
height: auto;
width: auto;
}
nav {
width: 90%;
margin: 5% auto;
overflow: hidden;
}
nav ul{
list-style: none;
overflow: hidden;
padding-left: 0;
display: flex;
flex-wrap: wrap;
}
nav ul li
{
flex: 1 1 0;
display: block;
}
nav ul li a {
background-color: #737373;
border: 1px solid #2F3038;
color: #2F3038;
display: block;
font: 16px, Arial, Helvitica;
padding: 10px;
text-align: center;
text-decoration: none;
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
-ms-transition: background 0.5s ease;
transition: background 0.5s ease;
}
nav li a:hover{
background: #DADADA;
}
@media only screen and (max-width: 580px){
nav ul li
{
flex: 0 0 33.333333%;
}
nav li a{
font: 13px Arial, Helvitica;
padding-top: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #2F3038;
}
nav li:nth-child(even) a{
border-right: none;
}
}
@media only screen and (max-width: 325px){
nav ul li
{
flex: 0 0 50%;
}
}
推荐阅读
- html - 未能在网站上设置输入框值
- c# - Unity:告诉容器在注册类型时始终使用接口的特定实现
- github - 如何在 github 操作中获取拉取请求中的文件列表
- aws-ecr - 如何使用fabric8 maven插件将docker镜像推送到AWS ECR,同时从默认注册表中提取基础镜像?
- php - Braintree Webhook 方法
- sql - 如何使用来自多个表的数据在 SQL 中执行条件更新?
- mysql - MS Access 超时获取表
- cassandra - 如何处理磁盘上 Cassandra 中的空目录?
- node.js - 等待异步函数的 while 循环 (Node.js/ES6)
- rename - 当我们可以增加架构中的寄存器数量时,为什么要进行寄存器重命名?