手机和PC端交互方式不一样，移动端多数没有hover，没有resize，没有滚动条，有touch
1、媒体查询
在css中加入@media( ){ }，当页面大小满足相应像素时，会改变css内容，如下图。(下图写法会发生覆盖问题，应把顺序倒过来写或者加 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端页面(论坛，知乎等)
(响应式页面现在一般用于新闻或者博客等一些简单页面的网站)
