在不同分辨率下我们想让页面呈现不同效果，可以用CSS3 媒体查询来实现
让你的网页适配移动端
这可以使用HTML的meta标签来实现：声明一个viewport
代码示例
参考文档：https://developer.mozilla.org/zh-CN/docs/Mobile/Viewport_meta_tag
如果对该属性有些疑问，可以参考上方的网址来查看详细文档。
为什么要适配移动端？
-
你的用户不一定全部是桌面端用户
-
多设备的兼容性
-
高大上（确实）
-
增加拓展性
如果不加该meta属性，则移动端会不缩放，显示PC端的界面
媒体查询
我们先写一个示例div，然后给他样式
代码：
效果图：
此时我们缩放视图
可见这个div溢出了，所以出现了滑动条。
但是我们想让视图缩小时div的样式跟着改变，此时我们可以用到媒体查询
@media是声明一个媒体查询，括号中加上条件，如max（最大宽度）和min（最小宽度），再加上花括号，里面加上选择器。
上图代码的意思是：在默认情况下#test选择器的宽度为1000px，高度为10000px，背景颜色为红色；当视图最大宽度为600时，#test选择器的宽度为500px，高度为500px，背景颜色为绿色。
此时我们缩放页面：
最大宽度为600（小于等于600）：
大于600像素：
可以看到样式发生了变化
Author: iVampireSP.com
?过来逛逛，学到了?！
大佬大佬爱
不至于不至于不至于
大佬又更新了
不敢当不敢当，这连皮毛都不如