media query（就和if差不多感觉）
@media(max-width:800px){
body{background:red
}
}//如果浏览器满足800那个条件，就变红色背景
如果不同范围对应不同颜色，应该怎么办呢？
@media(max-width:700px){
body{background:red
}
}
@media(max-width:800px){
body{background:blue
}
}
//实际得不到我们要的效果，因为后来居上，不管怎样都是blue
改一下顺序就美滋滋了
@media(max-width:800px){
body{background:red
}
}
@media(max-width:700px){
body{background:blue
}
}
或者我们更加明确一下范围好了
<style>
@media(min-width:700px){
body{background:black;
}
}
@media(max-width:500px){
body{background:blue;
}
}
@media(min-width:500px) and (max-width:700px){
body{background:red;
}
}//注意and二边有空格哦
</style>
<link rel="stylesheet" href="style.css" media="(max-width:320px)">
只有满足这个条件才link生效哦，虽然都会下载。不同屏幕的不同都是通过这个media query得到的
有些是直接跳转到手机对应的链接，有些是有二套css
手机端要加一个 meta
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
手机端的交互方式不一样
没有 hover
有 touch 事件
没有 resize
没有滚动条
