移动端页面和响应式

当你在动的时候，页面也在变化，这就是“响应式”。

一、学会 media quer

1. 直接在HTML的<style>标签内写：

@media (查询条件1) and (查询条件2) ...{
    CSS样式设置
}
复制代码

2. 写在<link>标签里：

<link rel="stylesheet" href="style.css" media="(max-width:320px)">
复制代码

所有的响应式都是使用媒体查询实现的。
要注意优先级问题，避免被不合适地覆盖，最好是设定查询条件时就消除交集部分。

二、学会要设计图（没图不做）

实在要做也行，丑可别怪我

• Mobile first
• Desktop first

三、学会隐藏元素

四、手机端要加一个 meta

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
复制代码

五、手机端的交互方式不一样

1. 没有 hover
2. 有 touch 事件--swipe
3. 没有 resize（浏览器窗口大小没办法改）
4. 没有滚动条（隐藏的滚动条）