手机端页面的做法：
媒体查询
media
<style>
/* 注意：400px后面不要有 “ ; ” */
@media (max-width: 400px){ /* 0 ~400 */
body{
background: red;
}
}
</style>
说明：如果宽度满足0~400px之间，body就会变红。
PS：media可写多个。
效果.gif
-
两者都要满足
@media ( 条件1 ) and ( 条件2 )
@media (min-width:320px ) and (max-width:425px){ /*320 ~ 425*/
body{
background: red;
}
}
@media (min-width:425px ) and (max-width:700px){ /*425 ~ 700*/
body{
background: red;
}
}
-
媒体查询的结果可以用css文件代替吗?
<link rel="stylesheet" href="style.css" media="(max-width:500px)">
说明：设备宽度为0~500px时才会生效。
PS：style.css会自动提前下载好了
效果.gif
-
栗子：
建议先做手机
手机端 + pc端
移动端样式
/*移动端样式*/
* {margin: 0;padding: 0;}
a {text-decoration: none;color: #000;}
ul,ol {list-style: none;}
header{
padding: 20px;
position: relative;
}
/* button的位置 */
header>button{
position: absolute;
top:30px;
right: 20px;
}
.logo {
height: 50px;
width: 50px;
background: darkcyan;
border-radius: 50%;
}
/* 导航栏默认看不见 */
.nav {
display: none;
/* background: darkkhaki; */
}
/* 激活看得见 */
.nav.active {
display: flex;
justify-content: space-between;
}
.nav>li{
background:deepskyblue;
padding: 5px 10px;
}
/* 默认情况下pc端的导航为隐藏 */
.nav2{
display: none;
}
pc端样式
/* pc端样式 */
@media (min-width:450px) {
header>button{
display: none;
}
.nav,.nav.active{
display:none;
}
.nav2{
display:block;
}
header{
display: flex;
align-items: center;
justify-content: center;
}
header .nav2{
display: flex;
margin-left: 20px ;
}
header .nav2>li{
margin: 5px 10px;
}
}
html
<header>
<div class="logo"></div>
<button id="aa">菜单栏</button>
<div class="box">
<!-- 移动端导航 -->
<ul id="yy" class="nav">
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
<li><a href="#">导航5</a></li>
</ul>
<!-- pc端导航 -->
<ul class="nav2">
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
<li><a href="#">导航5</a></li>
</ul>
</div>
</header>
/*js菜单隐藏切换*/
<script>
aa.onclick = function () {
yy.classList.toggle('active')
}
</script>
效果.gif
总结：
1、学会media。
2、学会要设计图，没图不做。（pc端效果、手机端效果）
3、学会隐藏元素。（display: none; display: block;）
4、手机端要加meta
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">-
5、手机端的交互方式不一样。
a、没有hover
b、有touch事件
c、没有resize
d、没有滚动条
