- 学会
media query（媒体查询） - 没图不做
- 学会隐藏元素
- 手机端要加一个
<meta>
<meta name="viewport" content="width=device-width, user-scalable= no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> - 手机端的交互方式不一样
i. 没有 hover
ii. 没有 touch 事件
iii. 没有 resize （窗口大小调整）
iv. 没有滚动条
media
在 css 中添加
@media (max-width) { /* 宽度为 0 ~ max-width */
}
@media (min-width) and (max-width) { /* 宽度为 min-width ~ max-width */
}
在原有的样式下面添加上面代码，来实现响应式页面
在头文件中添加
<link rel="stylesheet" href="style.css" media="(max-width: 320px)"
媒体查询是可以用 css 文件代替具体内容的
也是先把文件加载好，但是只有满足max-width: 320px时 css 才生效
一个响应式的布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//at.alicdn.com/t/font_1319834_8npptldh1bp.css">
<title>layout-mobile</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
#top {
position: relative;
max-width: 1000px;
margin: 0 auto;
}
header {
background: #ddd;
display: flex;
justify-content: space-between;
justify-items: center;
}
.logo {
height: 40px;
width: 70px;
background: #444;
color: white;
text-align: center;
line-height: 36px;
}
header>#menu {
line-height: 16px;
padding: 11px;
color: #444;
}
.nav2 {
display: none;
justify-content: flex-end;
margin-top: 5px;
position: absolute;
top: 4px;
right: 0;
}
.nav2>li {
margin-left: 5px;
margin-right: 0;
height: 24px;
line-height: 24px;
background: #444;
color: white;
}
@media (min-width: 451px) {
header>#menu {
display: none;
}
.nav2 {
display: flex;
}
}
.nav {
display: flex;
background: #444;
margin-top: 5px;
justify-content: space-around;
}
.nav>li {
border: 1px solid white;
margin: 3px 0;
padding: 0 3px;
color: white;
}
.nav {
display: none;
}
.nav.active {
display: flex;
}
</style>
</head>
<body>
<div id="top">
<header>
<div class="logo">logo</div>
<div id="menu"><span class="iconfont icon-liebiao"></span></div>
</header>
<ul class="nav"> <!-- mobile nav -->
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
<li>导航5</li>
</ul>
<ul class="nav2"> <!-- pc nav -->
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
<li>导航5</li>
</ul>
</div>
</body>
<script>
document.querySelector('#menu').addEventListener('click', function () {
document.querySelector('.nav').classList.toggle('active')
})
</script>
</html>
- 先写手机端的样式（mobile first），导航栏默认隐藏，点击右上角菜单后
出现 - 再重新写一个 PC 端的导航栏，再另外写它的样式
