1. 为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1">
或者
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
其中，在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能.
上面两个meta视情况二选一添加
2. 媒体查询,如 @media screen and (max-width/min-number) {}
常用的不同屏幕分辨率大小基本如下：
480px,768px,979px,1200px
适配顺序
(1)max-number0,如@media screen and (max-768px) {…}
表示当前设备分辨率小于等于768px，该媒体查询下的代码会生效。如果单纯使用max-width时，分辨率按照从大到小排列，大的在上面。
(2)(min- number1) and (max-number2),如
@media (min- 769px) and (max-1200px) {…}
表示当前设备如果>=769并且<=1200时，该代码会生效。注意768和769一个像素的差别
(3) min-number3,如@media screen and (min-1201px) {…}
表示当前设备分辨率大于等于1201px，该媒体查询下的代码会生效。如果单纯使用min-width时,分辨率按照从小到大排列，小的在上面。
注：以上仅是个人理解，有理解误差的地方欢迎指正。