1、使用meta标签：viewport
viewport标签极其属性：
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 每个属性的详细介绍：
属性名 取值 描述 width 正整数 或 device-width 定义视口的宽度，单位为像素 height 正整数 或 device-height 定义视口的高度，单位为像素，一般不用 initial-scale [0.0-10.0] 定义初始缩放值 minimum-scale [0.0-10.0] 定义缩小最小比例，它必须小于或等于maximum-scale设置 maximum-scale [0.0-10.0] 定义放大最大比例，它必须大于或等于minimum-scale设置 user-scalable yes/no 定义是否允许用户手动缩放页面，默认值yes
2、使用css3单位rem
3、使用媒体查询
媒体查询也是css3的方法，我们要解决的问题是适应手机屏幕，这个媒体查询正是为解决这个问题而生。
媒体查询的功能就是为不同的媒体设置不同的css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等。
例如：如果浏览器窗口小于 500px, 背景将变为浅蓝色：
@media only screen and (max-width: 500px) { body { background-color: lightblue; } }
1，使用淘宝的适配方式
2，引入scss文件，下载buy
gem sources --add https://gems.ruby-china.org/ --remove https://rubygems.org/
发现依然报错无法安装。。。
最终解决方案是，把https换成http：
gem sources --add http://gems.ruby-china.org/ --remove https://rubygems.org/
