媒体查询
第一种方式： 直接在head里写style
比如：
<style>
@media(max-width: 320px){
body{
background: red;
}
}
@media(min-width:320px)and(max-width: 375px){
body{
background: orange;
}
}
@media(min-width:375px)and (max-width: 425px){
body{
background: green;
}
}
@media(min-width: 425px) and (max-width: 768px){
body{
background: blue;
}
}
@media(min-width: 769px){
body{
background: purple;
}
}
</style>
第二种方式：引入CSS文件
<link rel="stylesheet" href="index.css" media = "(max-width:425px)">
上面这行代码表示 ： 表示这个index.css 只有在宽度小于425px的时候才会生效(始终会下载，但是只有在满足条件时才会生效)。
media 不影响性能。
移动端页面大小自适应
手机端加meta
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
快速输入： meta:vp →Tab
手机端的交互方式不一样
- 没有 hover
- 有 touch 事件
- 没有 resize
- 没有滚动条
