手机端页面

媒体查询

@media (min-width: 700px) { ... }
(min-width: 700px) and (orientation: landscape) { ... }

详见：MDN CSS媒体查询

直接引用手机版的css（后端去实现）

<link rel="stylesheet" media="(max-width:768px)" href="mobile.css">

加上meta
快捷键：meta:vp + tab

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

手机端的特点：交互方式不一样

• 没有 hover
• 有 touch 事件
  根据2点触摸坐标的差值来判断用户在滑动
  库：TouchSwipe
• 没有 resize
• 没有滚动条