/* -----------------rem 适配------------------- */
// rem 原理：根据 html 的 fontSize 属性值为基准，其它所有的 rem 值，根据这个基准计算。
// 我们根据屏幕宽度用 js 动态修改了 html 的 fontSize 属性值，达到移动端适配的目的
let html = document.documentElement;
//getBoundingClientRect() 方法返回一个矩形对象，包含六个属性 :top,bottom,left,right,width,height
//我这里是基于宽 750px 的屏幕分成了 75 份，也就是 1rem = 10px
window.rem = html.getBoundingClientRect().width/75;
html.style.fontSize = window.rem +'px';
//现在，写代码的时候，12px就可以写成1.2rem
现在说下sass下rem响应式用法。
这种方式，在调试页面的时候，就不需要刷新了，自动跟着屏幕宽度变化。先贴下代码，一睹为快。
$defaultSize: 75px !default;
@function rem($px){
    @return $px / $defaultSize * 1rem;
html{
    font-size: 10vw;
    font-family: "微软雅黑";
.hello{
    width: rem(130px);
    height: 100%;
    background: #2e945a;
没错就是这么简单，惊不惊喜，震不震惊。反正本公子第一次get到这个的时候，内心还是非常喜悦的。
rem通俗的定义：如果你没有在根元素指定参照值，那浏览器默认就是 1rem 为 16px,如果你指定了根元素值假设为 10px，那 1rem 就为 10px。
再说下 vw 定义：vw 相对于视窗的宽度：视窗宽度就是100vw。
“视区”所指为浏览器内部的可视区域大小，即window.innerWidth大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。
1vw = 1 / 100 , 也就是1%，类似于width: 1%.
假设我有个 设计稿，宽度 是 750px。
那么 1vw 的大小 = 750px * 1 /100 = 7.5px;
假设我设置默认字体 $defaultSize 大小为 75px,
那么我此时页面的html字体大小换做视图单位 就可以设置为  75px/(7.5px/vm) = 10vw; 也就是在响应式下 html{ font-size: 10vm};
然后再说下 sass 中 rem 写法 ：
@function rem($px){
    @return $px / $defaultSize * 1rem;
$px为需要转换的字号，例如，在750px设计图，侧边栏的宽度为 130px,那么 它的宽度为 width: rem(130px)。
$defaultSize 困惑了我好久，到底该怎么设置它的值。后来取值测试了好久，干脆以 html{font-size:10vw}为基准，根据上面的描述，也就是 10*1vw = 10 *7.5px = 75px，或者换一种说法，就是 设计图的宽度/10 (750px/10) 。
例如在上面所说的例子在 iphone6 下 375*667 的设计图下，$defaultSize 直接设置为 37.5px, 那么它的根 字体大小 为 37.5px/(3.75px/vm) = 10vw，设计图中的 侧边栏宽度为 152px, 所以侧边栏 width:rem(152px)，此时在调试模式展示,切换到iphone5模式下，此时的 侧边栏宽度为 130px,跟 上例一致。
所以总结如下，只需要根据设计图的宽度 除10，去设置 $defaultSize 即可。 其他直接复制上面的代码直接用就可以~是不是很方便！
这种写法，对于手机端还是很适用的，当然如果需要同时适配pad，ipad等设备，还需要根据设计图去修改，例如，可以通过媒体查询修改对应的宽高等。
不知道能不能看明白，之前刚接触这种写法的时候，也写过一篇相似的文章，当时写完，逻辑不通，自己都把自己讲糊涂了… 不过会用就好~~~
这是之前的网址：https://segmentfault.com/n/1330000007677257
有不理解之处，还望多多反馈~~多多探讨，这个我也是琢磨出来的…
如何在Vue中如何使用sass
继续上一篇的文章，在Vue中使用sass,我们需要安装sass的依赖包.
npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass
修改style标签
打开src目录下的components目录中的Hello.vue文件。
然后修改 style标签如下,表示使用sass语法编译
<style lang="scss"></style>
关于这个为什么是lang=="scss"，而不是lang=="sass"，因为sass语法不使用大括号和分号。个人比较喜欢带括号的样式语法去写，可以根据自己的习惯选择。
引用sass/scss 文件
    @import  "./static/scss/base.scss";