- 學(xué)會(huì)
media query（媒體查詢） - 沒圖不做
- 學(xué)會(huì)隱藏元素
- 手機(jī)端要加一個(gè)
<meta>
<meta name="viewport" content="width=device-width, user-scalable= no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> - 手機(jī)端的交互方式不一樣
i. 沒有 hover
ii. 沒有 touch 事件
iii. 沒有 resize （窗口大小調(diào)整）
iv. 沒有滾動(dòng)條
media
在 css 中添加
@media (max-width) { /* 寬度為 0 ~ max-width */
}
@media (min-width) and (max-width) { /* 寬度為 min-width ~ max-width */
}
在原有的樣式下面添加上面代碼，來實(shí)現(xiàn)響應(yīng)式頁面
在頭文件中添加
<link rel="stylesheet" href="style.css" media="(max-width: 320px)"
媒體查詢是可以用 css 文件代替具體內(nèi)容的
也是先把文件加載好，但是只有滿足max-width: 320px時(shí) css 才生效
一個(gè)響應(yīng)式的布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" >
<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>導(dǎo)航1</li>
<li>導(dǎo)航2</li>
<li>導(dǎo)航3</li>
<li>導(dǎo)航4</li>
<li>導(dǎo)航5</li>
</ul>
<ul class="nav2"> <!-- pc nav -->
<li>導(dǎo)航1</li>
<li>導(dǎo)航2</li>
<li>導(dǎo)航3</li>
<li>導(dǎo)航4</li>
<li>導(dǎo)航5</li>
</ul>
</div>
</body>
<script>
document.querySelector('#menu').addEventListener('click', function () {
document.querySelector('.nav').classList.toggle('active')
})
</script>
</html>
- 先寫手機(jī)端的樣式（mobile first），導(dǎo)航欄默認(rèn)隱藏，點(diǎn)擊右上角菜單后
出現(xiàn) - 再重新寫一個(gè) PC 端的導(dǎo)航欄，再另外寫它的樣式
