移动端页面

手机和PC端交互方式不一样，移动端多数没有hover，没有resize，没有滚动条，有touch

1、媒体查询

在css中加入@media( ){ }，当页面大小满足相应像素时，会改变css内容，如下图。(下图写法会发生覆盖问题，应把顺序倒过来写或者加 and)

同时满足，后写覆盖前写 加and

---

2、meta viewport

如果想手机端正常实现大小，不缩放，则在HTML中加入  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

content="width=device-width：宽度为设备宽度，     user-scalable=no：用户不能缩放

---

3、动态rem初步认识

rem = （font size of the root element）根元素字体尺寸

首先要知道设备像素比dpr。dpr = 设备物理像素 ÷ 设备独立像素

设备物理像素：比如iphone6横向就有750个可以改变颜色的点，类似与电视机，如果家里有10年前买的大头电视，你趴在屏幕前仔细看能看到一个个RGB的点，这就是设备的物理像素。

设备独立像素：设备独立像素是一个虚拟的概念，比如我们将一个div宽度设置为10像素 那么在pc上系统会将这个div显示在屏幕的10个点上。

例如：iphone3G 设备物理像素320个点，设备独立像素320px，那么dpr就是1。iphone6 设备物理像素750个点，设备独立像素375px，那么dpr就是2。也就是我们css中写的1px其实不等于设备实际上的那1px，也可能等于设备上的2px。

通过window.devicePixelRatio来获取dpr

---

3、现在一般情况下，都不做响应式页面。主流的有：

①移动端和PC端为两个库，手机访问时，网址会改变。(一般购物网站)

PC端淘宝 移动端淘宝

②检测到为移动端给移动端页面，反之给PC端页面(论坛，知乎等)

网址不变 两套页面

(响应式页面现在一般用于新闻或者博客等一些简单页面的网站)