移动端页面（响应式）

造一个本地服务器
1.npm i -g http-server
2.http-server -c-1

1.学会 media query

浏览器宽度到了800px就执行media的css

@media(min-width:321px) and (max-width:375px){
body{
background: orange;
}
} 
注意这种没有交集的写法，要两个括号


@media(min-width:769px){
body{
background: purple;
}
}

另外一种方式,在link标签里面写一个media媒体查询的标志位

2.学会要设计图（没图不做）
实在要做也行，丑可别怪我

mobile first

js不要去修改css样式，添加删除类名

现在网站的响应式，比如淘宝，京东，用的是viewport媒体查询，如果你是移动端就跳到移动端的网站，如果你是pc端就跳到pc端的网站，两个域名不同的网站，因为这两个公司pc和移动端是两个部门，所以就分开做。两套不同的HTML
一般的网站的响应式，也是查询你是移动端还是pc端，同一个HTML重新渲染。

而不采用传统的media查询方式，因为这个在同一套样式进行修改会导致代码特别凌乱复杂，因此一般用第二种方式。

3.学会隐藏元素

4.手机端要加一个 meta

之前传统的手机端只能把网页直接搬到手机端上，980px宽放到320px上会显得特别特别小，这个时候人们通过模拟980px的方式把pc端的页面等比例投放到手机上，这就是meta标签 viewport的作用 了。

5.手机端的交互方式不一样
没有 hover
有 touch 事件
没有 resize
没有滚动条