移动端页面（响应式）

手机端页面的做法

学会 media query

• 媒体查询 通过@media，判断设备类型，如pc/mobile/pad等设配，然后根据媒体查询的结果使用不同的css。一套html + 多套css

• pc端一套html+css/手机端一套html+css

• 不做响应式布局，pc端和手机端分别使用一个域名，做两个不同的网站 例如淘宝和京东。

淘宝pc端网址：www.taobao.com

淘宝手机端网址： m.taobao.com

手机端要加一个 meta

<!-- 快捷方法  meta:vp -->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
复制代码

这个name="viewport"的meta标签是干嘛用的？

iPhone3GS进入中国的时候，发现中国的网页大部分宽度都是980px左右的，而iphone3GS手机宽度只有320px。

那320像素的手机怎么展示980像素的网页呢？

苹果就想了一个办法，那就把所有的网站都缩放，模拟出980像素的效果。

但是后面我们开发的页面都会去适配手机宽度，此时就不需要缩放网页了，这里就需要加入上述的meta标签

• width=device-width 告诉我们 宽度=设备宽度
• user-scalable=no 告诉我们 用户缩放=不缩放

不加上述meta标签 下面代码结果为980，加了meta标签后，下面代码输出设备宽度

document.documentElement.clientWidth //980or设备宽度
复制代码

手机端的交互方式不一样

• 没有 hover
• 有 touch 事件
• 没有 resize
• 没有滚动条