使用 Node 的 scss 做自适应的页面

先上成果
静态预览链接：https://xianjiezh.github.io/animating-pikachu/
动态预览链接： https://xianjiezh.github.io/animating-pikachu/animating-version/
代码链接： https://github.com/xianjiezh/animating-pikachu
实测静态链接可以兼容各种常见尺寸的屏幕

为什么说是使用Node 的scss？

答：因为scss 和 sass 是 ruby 社区发明的工具，所以官方文档会要求装一个ruby，但是 ruby 是后端语言、甚至国内都用的很少，所以，有人把 scss 做出了一个 Node 的版本

几个表示长度的单位

px：像素，屏幕内最小的一个颜色块，具体的宽度由屏幕所决定，不同的屏幕上1个px所代表的宽度不同

em ：一般的说法是一个m的高度或者一个汉字的高度

vh、vw：viewport height，viewport width，视口的高度或宽度，100vh就等于视口的高度

rem ：root em ，根元素的font-size，根元素就是html，在css里面指定html标签的font-size，就可以在后面使用rem作为单位，一个rem就等于html里面的font-size；如果没有在html里面指定rem，那么它默认是16px。
使用方法：




  
  JS Bin
  


韩韩

这样，p标签里面的字体就是120px
需要注意，一般不要给字体设置小于12px；因为不同的浏览器有时它的字体最小最能设置到12px，小于12px会按12px算

rem做手机自适应方案

1. SCSS 是做什么的？

css这种编程语言没有 if ... else 和 for 循环，函数等一般的编程语言都有的东西，只能想填空一样对盒子们进行排列顺序，SCSS是一些后端rails（一个后端框架）社区发明的比较写css的方法，在这里面，可以实现其他正常的编程语言都有的东西

2. 怎么使用

如果搜索中文的资料，那么，可能是无法学会SCSS的，因为大部分中文资料都是过时的，他们甚至会让你去安装ruby（一种后端语言），这里我使用的是node 的SCSS

只需要几句命令就可以了

步骤如下：
在命令行里面（cmd、gitbash或者其他系统自带的终端）依次输入一下命令：

* npm config set registry [https://registry.npm.taobao.org/](https://registry.npm.taobao.org/ "null")
因为国内的众所周知的原因，连接到外网时速度会比较慢，这句命令是让下载 SCSS的地址改变到淘宝上
touch ~/.bashrc
~/.bashrc 是设置命令行系统的文件，生成这样的一个文件
输入start ~/.bashrc（window下）或open ~/.bashrc（其他正常系统下），然后选择一款编辑器打开，输入 export SASS_BINARY_SITE="export SASS_BINARY_SITE="[https://npm.taobao.org/mirrors/node-sass](https://npm.taobao.org/mirrors/node-sass)"，让SCSS的源也指向淘宝
source ~/.bashrc ，让刚才的改动生效
npm i -g node-sass，安装 node-sass，会自带scss、或者是scss是sass的升级版
可以使用了，新建两个文件 style.scss 和style.css，我们把代码写在 style.scss 里面，让工具翻译写的scss 格式的文件，然后输出成css文件
命令是 node-sass style.scss style.css , 前面是scss文件，后面是翻译出来的css文件，node-sass style.scss style.css可以随时监听这个scss文件的改动

3. SCSS代码的格式

如下


$designWidth : 380;
@function px( $px ){
    @return $px / $designWidth * 10 + rem;
}
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body{
    background-color: #ffe600;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    .main-wrapper{
        width: 100%;
        height: px(200);
        position: relative;
        .nose{
            width: 0;
            height: 0;
            border-radius: 50%;
            border: px(13) solid red;
            border-width: px(13) px(14);
            border-color: black transparent transparent transparent;
            position: absolute;
            top: px(20);
            left: 50%;
            transform: translateX(-50%)
        }
// 省略 n 多代码
}

可以看到，这个会让css的代码更有规律，在维护的时候不需要到处找选择器了，甚至，它有点儿像组件的写法，每个section之可以是独立的

并且在上面有一个函数来根据设计稿给定的尺寸生成 rem 值，这个就是自动适应不同屏幕的原理

此外，在使用时，需要HTML 文件里面写这样的代码

这段代码是获取屏幕的宽度，并且将其缩小成合适大小生成一个 rem 的值，scss文件里面的 px 函数里面的px函数里面的 * 10 跟这边的 / 10 是可以抵消的

为什么两边都要用10来抵消一下，直接用原来的值不行吗？
答：不行，因为有的结果算出来是一个小数，比如0.123px，那么，浏览器会自动忽略有的数，造成误差，除以10可以减少这样的误差

只要上面的命令行在工作中，每次写完scss里面的代码，保存一下，就会自动更新 css 里面的代码

在测试pc的兼容时，发现图片严重变大，原因是一开始是根据手机端做的页面，手机端是屏幕宽度比高度小很多，而pc端是高度比宽度小很多，后来在script标签里面的代码上加了一写代码就可以了

当屏幕宽度大于800像素时，获取的pageWidth 就一直等于 800，这样可以兼容常见的笔记本的屏幕

此外，手机端最好使用border-box，因为这样在算宽度的时候就不用担心因为border和padding的宽度而反复计算了，只需要计算某个元素总体的宽度就行