造一个本地服务器
1.npm i -g http-server
2.http-server -c-1
1.学会 media query
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>移动端页面</title>
<style>
@media(max-width:800px){
body{
background: red;
}
}
</style>
</head>
<body>
</body>
</html>
浏览器宽度到了800px就执行media的css
@media(min-width:321px) and (max-width:375px){
body{
background: orange;
}
}
注意这种没有交集的写法，要两个括号
@media(min-width:769px){
body{
background: purple;
}
}
另外一种方式,在link标签里面写一个media媒体查询的标志位
<link rel="stylesheet" href="./style.css" media="(max-width:320px)">
2.学会要设计图（没图不做）
实在要做也行，丑可别怪我
mobile first
js不要去修改css样式，添加删除类名
现在网站的响应式，比如淘宝，京东，用的是viewport媒体查询，如果你是移动端就跳到移动端的网站，如果你是pc端就跳到pc端的网站，两个域名不同的网站，因为这两个公司pc和移动端是两个部门，所以就分开做。两套不同的HTML
一般的网站的响应式，也是查询你是移动端还是pc端，同一个HTML重新渲染。
而不采用传统的media查询方式，因为这个在同一套样式进行修改会导致代码特别凌乱复杂，因此一般用第二种方式。
3.学会隐藏元素
4.手机端要加一个 meta
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
之前传统的手机端只能把网页直接搬到手机端上，980px宽放到320px上会显得特别特别小，这个时候人们通过模拟980px的方式把pc端的页面等比例投放到手机上，这就是meta标签 viewport的作用 了。
5.手机端的交互方式不一样
没有 hover
有 touch 事件
没有 resize
没有滚动条
