图示1:
图示2:
图示3:
html:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>响应式</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header id="header">
<div class="center">
<h1 class="logo">瓢城旅行社</h1>
<nav class="link">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="information.html"><span class="xs-hidden">旅游</span>资讯</a></li>
<li><a href="ticket.html">机票<span class="xs-hidden">订购</span></a></li>
<li class="xs-hidden"><a href="scenery.html">风景欣赏</a></li>
<li class="active"><a href="about.html"><span class="xs-hidden">关于</span>公司</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>
css:
*{
margin: 0;
padding: 0;
}
body{
background-color: #f5f5f5;
}
#header {
width: 100%;
height: 70px;
background-color: #333;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}
#header .center {
max-width: 1263px;
height: 70px;
margin: 0 auto;
}
/*logo*/
#header .logo {
width: 30%;
height: 70px;
background: url(../img/logo.png) no-repeat left center;
text-indent: -9999px;
float: left;
}
#header .center .link{
width: 55%;
height: 70px;
line-height: 70px;
float: right;
}
#header .center .link li{
width: 20%;
text-align: center;
float: left;
list-style-type: none;
}
#header .center .link li a{
display: block;
text-decoration: none;
color: #eee;
}
#header .center .link li a:hover,#header .active a{
background:#000;
}
.sm-visible {
display: none;
}
/*响应式*/
@media (min-width: 1200px) {
}
/*在992 和1199 像素之间的屏幕里,中等屏幕,分辨率低的PC*/
@media (min-width: 992px) and (max-width: 1199px) {
}
/*在768 和991 像素之间的屏幕里,小屏幕,主要是PAD*/
@media (min-width: 768px) and (max-width: 991px) {
}
/*在480 和767 像素之间的屏幕里,超小屏幕,主要是手机*/
@media (min-width: 480px) and (max-width: 767px) {
#header, #header .center, #header .link {
height: 45px; /*宽度减小*/
}
#header .logo, .sm-hidden,.sidebar,.md-hidden {
display: none; /*元素消失*/
}
#header .center .link {
width: 100%;
line-height: 45px;/*调整行高*/
}
}
/*在小于480 像素的屏幕,微小屏幕,更低分辨率的手机*/
@media (max-width: 479px) {
#header, #header .center, #header .link {
height: 45px;
}
#header .logo, .xs-hidden, .sm-hidden, .sidebar, .md-hidden {
display: none;
}
#header .center .link {
width: 100%;
line-height: 45px;
}
#header .center .link li {
width: 25%;
}
}
注意点:
1 上下文选择器要一致:上面如果写成#header .center .link 响应式也要这样写,不可写成#header .link即使是一个意思